/* ══════════════════════════════════════════════════════════════ 日興ワールドソリューションズ — NIKKO WORLD SOLUTIONS (Elementor build) Part 1/3 — brand tokens + base resets + element typography. Kept low in the cascade so the component CSS (part 2) can win. ══════════════════════════════════════════════════════════════ */ :root{ --wp--preset--color--background:#F8FBF8; --wp--preset--color--surface:#FFFFFF; --wp--preset--color--text:#15271A; --wp--preset--color--muted:#5E6F63; --wp--preset--color--border:#DCE6DD; --wp--preset--color--primary:#309D3C; --wp--preset--color--accent:#8FD39A; --wp--preset--color--tint:#EAF6EC; --wp--preset--color--danger:#B02A20; --wp--preset--font-family--display:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP","MS PMincho",serif; --wp--preset--font-family--body:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Noto Sans JP","Meiryo",system-ui,sans-serif; --wp--preset--font-family--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace; --wp--preset--font-size--small:13px; --wp--preset--font-size--medium:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.556), 20px); --wp--preset--font-size--large:clamp(22.041px, 1.378rem + ((1vw - 3.2px) * 1.293), 36px); --wp--preset--font-size--x-large:clamp(25.014px, 1.563rem + ((1vw - 3.2px) * 1.573), 42px); --wp--preset--font-size--xx-large:clamp(22px,2.6vw,30px); --wp--preset--font-size--xxx-large:clamp(28px,3.6vw,44px); --wp--preset--font-size--huge:clamp(38px,5.6vw,72px); --wp--preset--font-size--mega:clamp(44px,5.4vw,72px); --wp--preset--spacing--20:8px; --wp--preset--spacing--30:12px; --wp--preset--spacing--40:20px; --wp--preset--spacing--50:32px; --wp--preset--spacing--60:56px; --wp--preset--spacing--70:96px; --wp--preset--shadow--soft:0 14px 40px rgba(48,157,60,.14); --wp--preset--shadow--deep:0 26px 70px rgba(48,157,60,.20); } img{max-width:100%;height:auto} p{margin:0} h1,h2,h3,h4,h5,h6{margin:0} body.nws-site h1{font-family:var(--font-display);font-size:var(--wp--preset--font-size--huge);font-weight:600;line-height:1.1;letter-spacing:-.01em} body.nws-site h2{font-family:var(--font-display);font-size:var(--wp--preset--font-size--xxx-large);font-weight:600;line-height:1.18;letter-spacing:-.01em} body.nws-site h3{font-family:var(--font-body);font-size:var(--wp--preset--font-size--x-large);font-weight:700;line-height:1.35} body.nws-site h4{font-size:var(--wp--preset--font-size--large);font-weight:700;line-height:1.4} body.nws-site h5{font-size:var(--wp--preset--font-size--medium);font-weight:700} body.nws-site h6{font-family:var(--font-mono);font-size:var(--wp--preset--font-size--small);font-weight:500;text-transform:uppercase;letter-spacing:.14em} /* Elementor's global "Text" typography stamps a font-size on every text-widget wrapper; that fights the design system and blocks per-widget sizing. Let the wrapper inherit instead — the design (or the user's own setting, which has a higher specificity) then decides the size. `:where()` keeps this at (0,1,0) so every later component rule here still wins. */ :where(body.nws-site) .elementor-widget-text-editor{font-size:inherit} body.nws-site .elementor-heading-title{font-family:inherit;color:inherit} /* heading widgets: restore the tag's weight + line-height (Elementor's per-page CSS + the heading default otherwise force the kit's 600 / body line-height) */ body.nws-site h1.elementor-heading-title{font-weight:600;line-height:1.1} body.nws-site h2.elementor-heading-title{font-weight:600;line-height:1.18} body.nws-site h3.elementor-heading-title{font-weight:700;line-height:1.35} body.nws-site h4.elementor-heading-title{font-weight:700;line-height:1.4} body.nws-site h5.elementor-heading-title{font-weight:700} body.nws-site .elementor-text-editor p:not(:last-child),body.nws-site .elementor-widget-text-editor p:not(:last-child){margin-bottom:.7em} /* ───────────────────────────────────────────────────────────── 日興ワールドソリューションズ — NIKKO WORLD SOLUTIONS Front-end stylesheet · design tokens come from theme.json ───────────────────────────────────────────────────────────── */ /* ─── tokens (mapped to WordPress presets) ─────────────────── */ :root { --bg: var(--wp--preset--color--background); --surface: var(--wp--preset--color--surface); --fg: var(--wp--preset--color--text); --muted: var(--wp--preset--color--muted); --border: var(--wp--preset--color--border); --accent: var(--wp--preset--color--primary); --accent-2: var(--wp--preset--color--accent); --tint: var(--wp--preset--color--tint); --danger: var(--wp--preset--color--danger); --accent-soft: color-mix(in oklch, var(--accent) 12%, transparent); --fg-soft: color-mix(in oklch, var(--fg) 6%, transparent); --font-display: var(--wp--preset--font-family--display); --font-body: var(--wp--preset--font-family--body); --font-mono: var(--wp--preset--font-family--mono); --gap-xs: 8px; --gap-sm: 12px; --gap-md: 20px; --gap-lg: 32px; --gap-xl: 56px; --gap-2xl: 96px; --container: 1140px; --gutter: clamp(20px, 4vw, 32px); --radius: 10px; --radius-lg: 16px; --shadow: 0 14px 40px color-mix(in oklch, var(--accent) 12%, transparent); --shadow-lg: 0 26px 70px color-mix(in oklch, var(--accent) 18%, transparent); /* brand bands (Values / CTA): light brand-green diagonal gradient over a solid brand-green fallback. The solid colour matters: Elementor's lazy-background CSS kills `background-image` (!important) on off-screen `.e-con.e-parent` containers, so a gradient alone would leave the band transparent until it scrolls into view. Colour survives that rule, so the band is never blank. */ --band-gradient: linear-gradient(135deg, #2E9B41 0%, #4FB768 52%, #96D8A1 100%); } /* ─── base ─────────────────────────────────────────────────── */ body.nws-site { background: var(--bg); color: var(--fg); font-family: var(--font-body); overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body.nws-body-lock { overflow: hidden; } .nws-site img, .nws-site svg { max-width: 100%; } .nws-site p { text-wrap: pretty; } .nws-site h1, .nws-site h2, .nws-site h3, .nws-site h4 { text-wrap: balance; } .nws-main { display: block; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; inset-block-start: 12px; inset-inline-start: 12px; z-index: 300; width: auto; height: auto; clip: auto; margin: 0; padding: 10px 16px; background: var(--accent); color: var(--surface); border-radius: 8px; font-size: 14px; } /* ─── layout primitives ────────────────────────────────────── */ .nws-container { --width: min(100%, var(--container, 1140px)); max-width: var(--width); margin-inline: auto; padding-inline: var(--gutter); width: 100%; } .nws-section { padding-block: clamp(56px, 8vw, var(--gap-2xl)); } .nws-section + .nws-section { border-top: 1px solid var(--border); } .is-style-nws-tint { background: var(--tint); } .nws-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg); } .nws-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); } .nws-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); } .nws-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); flex-wrap: wrap; } .nws-row-end { align-items: flex-end; } .nws-mt-lg { margin-block-start: var(--gap-lg); } .nws-mt-xl { margin-block-start: var(--gap-xl); } .nws-mb-lg { margin-block-end: var(--gap-lg); } .nws-measure { --width: 62ch; } .nws-muted { color: var(--muted); } .nws-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } @media (max-width: 920px) { .nws-grid-2, .nws-grid-3, .nws-grid-4 { grid-template-columns: 1fr; } } /* ─── cancel WP flow-layout block gaps inside theme-owned layouts ─── Every wp:group picks up the `is-layout-flow` class, and WordPress prints `:where(.is-layout-flow) > * { margin-block-start: var(--wp--preset--spacing--40) }` (16px) on its children — every child except the first. Inside the theme's own grid, flex and hero layouts that margin is never wanted and actively breaks them: · on a grid it shifts every item after the first down 16px, so the second row / first column stops lining up (the services cards); · on the hero's absolutely-positioned overlay layers (veil, grid, spotlight) `inset: 0` + a top margin leaves a bare 16px strip along the top edge (the “colour band” at the top of the hero image). The theme sets its own `gap`/margins for these, so zero the inherited one. Content groups that rely on the block gap (cards, form fields, headings) are deliberately left untouched. */ .nws-grid-2 > *, .nws-grid-3 > *, .nws-grid-4 > *, .nws-row-between > *, .nws-filters > *, .nws-scale > *, .nws-svc-grid > *, .nws-svc-detail > *, .nws-split > *, .nws-gallery > *, .nws-feature-grid > *, .nws-flow-track > *, .nws-values-media > *, .nws-price-grid > *, .nws-news-feature > *, .nws-newsitem > *, .nws-contact-grid > *, .nws-foot-grid > *, .nws-timeline > *, .nws-hero > *, .nws-pagehero > *, .nws-main > * { margin-block-start: 0; } /* imported static page content: also cancel any nested WP flow-layout block gaps (the .nws-* component CSS supplies every spacing these pages need) */ body.nws-site .nws-main :where(.is-layout-flow) > *, body.nws-site .nws-main :where([class*="is-layout-flow"]) > * { margin-block-start: 0; } /* ─── type helpers ─────────────────────────────────────────── */ .nws-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--gap-md); display: inline-flex; align-items: center; gap: 8px; } .nws-eyebrow::before { content: ""; inline-size: 22px; block-size: 1px; background: var(--accent); } .nws-eyebrow--bare::before { display: none; } .nws-sec-head { --width: min(100%, 46ch); max-width: var(--width); } .nws-sec-head--center { margin-inline: auto; text-align: center; } .nws-sec-head--center .nws-eyebrow { justify-content: center; } .nws-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.7; color: var(--muted); max-width: 62ch; margin: 0; } .nws-lead--sm { font-size: 16px; } .nws-meta { font-family: var(--font-mono); font-size: 13px; color: var(--muted); } .nws-idx-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--accent-2); } .nws-round img { border-radius: var(--radius-lg); } .nws-round { border-radius: var(--radius-lg); overflow: hidden; } /* ─── buttons (block + link) ───────────────────────────────── */ .wp-block-button__link, .nws-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: var(--radius); border: 1px solid transparent; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; line-height: 1.2; transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, color 0.2s ease; } .wp-block-button__link, .nws-btn-primary { background: var(--accent); color: var(--surface); border-color: var(--accent); box-shadow: var(--shadow); } .wp-block-button__link:hover, .nws-btn-primary:hover { background: color-mix(in oklch, var(--accent) 88%, black); color: var(--surface); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .wp-block-button__link:active, .nws-btn:active { transform: translateY(1px); } .is-style-nws-secondary .wp-block-button__link, .nws-btn-secondary { background: var(--surface); color: var(--fg) !important; border-color: var(--border); box-shadow: none; } .is-style-nws-secondary .wp-block-button__link:hover, .nws-btn-secondary:hover { border-color: var(--accent); color: var(--accent) !important; transform: translateY(-2px); } .is-style-nws-arrow .wp-block-button__link::after, .nws-btn-arrow::after { content: "\2192"; transition: transform 0.2s ease; } .is-style-nws-arrow .wp-block-button__link:hover::after, .nws-btn-arrow:hover::after { transform: translateX(4px); } .wp-block-button { margin: 0; } .wp-block-button__link:focus-visible, .nws-btn:focus-visible, .nws-site a:focus-visible, .nws-site button:focus-visible, .nws-site input:focus-visible, .nws-site select:focus-visible, .nws-site textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Astra sets `a:focus{outline:dotted thin}` — clicking a link/button with the mouse draws that thin dotted box. Remove it for pointer focus but keep the accessible :focus-visible ring above for keyboard users. */ body.nws-site a:focus:not(:focus-visible), body.nws-site button:focus:not(:focus-visible), body.nws-site input:focus:not(:focus-visible), body.nws-site select:focus:not(:focus-visible), body.nws-site textarea:focus:not(:focus-visible), body.nws-site .wp-element-button:focus:not(:focus-visible){outline:none} /* ─── header / nav ─────────────────────────────────────────── */ .nws-progress { position: fixed; inset-block-start: 0; inset-inline-start: 0; block-size: 3px; inline-size: 0; background: var(--accent); z-index: 60; transition: width 0.1s linear; } .nws-topnav { position: sticky; inset-block-start: 0; z-index: 40; background: color-mix(in oklch, var(--bg) 86%, transparent); backdrop-filter: blur(14px) saturate(1.1); border-block-end: 1px solid var(--border); transition: box-shadow 0.3s ease, background 0.3s ease; } .nws-topnav.is-scrolled { box-shadow: 0 10px 30px color-mix(in oklch, var(--accent) 10%, transparent); background: color-mix(in oklch, var(--bg) 94%, transparent); } .nws-topnav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); padding-block: 14px; } .nws-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .nws-brandmark { inline-size: 30px; block-size: 30px; flex: none; display: block; background: url(assets/mark-wreath.png) center / contain no-repeat; animation: nws-spinmark 34s linear infinite; } .nws-brandtext { display: flex; flex-direction: column; line-height: 1.15; } .nws-brandtext b { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: 0.01em; } .nws-brandtext span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.22em; color: var(--muted); } .nws-nav { display: flex; gap: var(--gap-lg); } .nws-nav a { font-size: 14px; color: var(--muted); position: relative; padding-block: 4px; text-decoration: none; } .nws-nav a::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; block-size: 1px; inline-size: 0; background: var(--accent); transition: width 0.25s ease; } .nws-nav a:hover { color: var(--fg); } .nws-nav a:hover::after { inline-size: 100%; } .nws-nav a[aria-current="page"] { color: var(--fg); font-weight: 700; } .nws-nav a[aria-current="page"]::after { inline-size: 100%; } .nws-navtools { --width: auto; display: flex; align-items: center; gap: 12px; } .nws-navtoggle { display: none; padding: 0; box-sizing: border-box; font-size: 0; line-height: 0; inline-size: 40px; block-size: 40px; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--fg); } .nws-navtoggle svg { inline-size: 18px; block-size: 18px; flex: none; margin-inline: auto; display: block; } @media (max-width: 1040px) { .nws-nav { display: none; } .nws-navtoggle { display: inline-flex; align-items: center; justify-content: center; } } /* ─── drawer ───────────────────────────────────────────────── */ .nws-drawer { position: fixed; inset: 0; z-index: 55; display: none; } .nws-drawer.is-open { display: block; } .nws-drawer-scrim { position: absolute; inset: 0; background: color-mix(in oklch, var(--fg) 42%, transparent); backdrop-filter: blur(2px); animation: nws-fade 0.25s ease both; } .nws-drawer-panel { position: absolute; inset-block-start: 0; inset-inline-end: 0; inset-block-end: 0; inline-size: min(86vw, 360px); background: var(--surface); border-inline-start: 1px solid var(--border); padding: 22px var(--gap-lg) var(--gap-xl); display: flex; flex-direction: column; gap: var(--gap-md); animation: nws-slidein 0.32s cubic-bezier(.2,.7,.3,1) both; overflow-y: auto; } .nws-drawer-head { display: flex; align-items: center; justify-content: space-between; } .nws-drawer-close { inline-size: 40px; block-size: 40px; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--fg); display: grid; place-items: center; } .nws-drawer-nav { display: flex; flex-direction: column; } .nws-drawer-nav a { font-family: var(--font-display); font-size: 19px; padding: 14px 0; border-block-end: 1px solid var(--border); color: var(--fg); text-decoration: none; } .nws-drawer-nav a[aria-current="page"] { color: var(--accent); } .nws-drawer .nws-btn { justify-content: center; } /* ─── footer ───────────────────────────────────────────────── */ .nws-pagefoot { padding-block: var(--gap-xl); color: var(--muted); font-size: 13px; border-block-start: 1px solid var(--border); background: var(--surface); } .nws-pagefoot .nws-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gap-xl); } .nws-foot-brand p { margin-block-start: 14px; max-width: 36ch; } .nws-pagefoot h4 { font-family: var(--font-display); font-size: 13px; margin: 0 0 14px; color: var(--fg); letter-spacing: 0.06em; } .nws-pagefoot a { display: block; padding-block: 4px; color: var(--muted); text-decoration: none; transition: color 0.2s ease; } .nws-pagefoot a:hover { color: var(--accent); } .nws-pagefoot .nws-rule { border: 0; border-block-start: 1px solid var(--border); margin: var(--gap-lg) 0; } .nws-pagefoot .nws-legal { display: flex; gap: var(--gap-md); flex-wrap: wrap; } .nws-pagefoot .nws-legal a { display: inline; } @media (max-width: 920px) { .nws-pagefoot .nws-foot-grid { grid-template-columns: 1fr; gap: var(--gap-lg); } } /* ─── hero ─────────────────────────────────────────────────── */ .nws-hero { position: relative; overflow: clip; --min-height: min(90vh, 840px); display: flex; align-items: center; padding-block: clamp(80px, 12vw, 140px); background: var(--accent); } .nws-hero__media { position: absolute; inset: -5%; margin: 0; z-index: 0; } .nws-hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; animation: nws-kenburns 26s ease-in-out alternate infinite; will-change: transform; } /* ─── hero slideshow (ヒーロースライダー widget) ─────────────── The wrapper is position:absolute with z-index:auto (NO stacking context), so its children compete directly in the hero: the media sits at z-index 0 (behind the scrim) and the dots at z-index 3 (above the scrim + content). */ body.nws-site .elementor-element.nws-hero-slider { position: absolute; inset: 0; z-index: auto; pointer-events: none; } body.nws-site .elementor-element.nws-hero-slider > .elementor-widget-container { position: absolute; inset: 0; } body.nws-site .elementor-element.nws-hero-slider .nws-hero__media { position: absolute; inset: 0; margin: 0; z-index: 0; } /* Inactive slides sit at the END scale so that, when a slide fades out, its zoom HOLDS (no snap-back / reverse motion during the dissolve). The slow one-way push runs only while a slide is active — an animation (not a transition) so it also plays on the very first slide at load. */ body.nws-site .nws-hero__slide { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transform: scale(1.075); animation: none; transition: opacity 1.9s cubic-bezier(.45,0,.25,1); } body.nws-site .nws-hero__slide.is-active { opacity: 1; animation: nws-herozoom var(--nws-hero-zoom, 6s) linear both; } body.nws-site .nws-hero__media--nokb .nws-hero__slide, body.nws-site .nws-hero__media--nokb .nws-hero__slide.is-active { transform: none; animation: none; } @keyframes nws-herozoom { from { transform: scale(1.005); } to { transform: scale(1.075); } } body.nws-site .nws-hero__dots { position: absolute; z-index: 3; inset-inline-end: clamp(16px, 3vw, 44px); inset-block-end: clamp(18px, 3vw, 44px); display: flex; gap: 10px; pointer-events: auto; } body.nws-site .nws-hero__dot { inline-size: 11px; block-size: 11px; border-radius: 50%; border: 1px solid color-mix(in oklch, var(--surface) 70%, transparent); padding: 0; background: color-mix(in oklch, var(--surface) 28%, transparent); cursor: pointer; transition: background-color .25s ease, transform .25s ease; } body.nws-site .nws-hero__dot.is-active { background: var(--surface); transform: scale(1.3); } body.nws-site .nws-hero__dot:hover { background: color-mix(in oklch, var(--surface) 62%, transparent); } .nws-hero__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, color-mix(in oklch, var(--accent) 60%, transparent) 0%, color-mix(in oklch, var(--accent) 34%, transparent) 48%, color-mix(in oklch, var(--fg) 18%, transparent) 100%); } .nws-hero__grid { position: absolute; inset: 0; z-index: 1; opacity: 0.5; --grid-shift: 0px; background-image: linear-gradient(color-mix(in oklch, var(--surface) 13%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--surface) 13%, transparent) 1px, transparent 1px); background-size: 64px 64px; background-position: var(--grid-shift) 0, var(--grid-shift) 0; mask-image: radial-gradient(120% 90% at 80% 10%, black, transparent 72%); -webkit-mask-image: radial-gradient(120% 90% at 80% 10%, black, transparent 72%); } .nws-hero__spotlight { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklch, var(--accent-2) 30%, transparent), transparent 62%); transition: opacity 0.4s ease; mix-blend-mode: screen; } .nws-hero:hover .nws-hero__spotlight { opacity: 0.75; } .nws-hero .nws-container { position: relative; z-index: 2; } .nws-hero__content { position: relative; color: var(--surface); --width: min(100%, 780px); max-width: var(--width); } .nws-hero__eyebrow { color: color-mix(in oklch, var(--surface) 84%, transparent); } .nws-hero__eyebrow::before { background: color-mix(in oklch, var(--surface) 70%, transparent); } .nws-hero__title { color: var(--surface); margin-block-end: var(--gap-md); text-shadow: 0 2px 30px color-mix(in oklch, var(--fg) 30%, transparent); } .nws-hero__title em { font-style: normal; position: relative; white-space: nowrap; } .nws-hero__title em::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0.04em; block-size: 0.14em; background: var(--accent-2); border-radius: 2px; transform-origin: left; animation: nws-underline 0.9s 0.7s cubic-bezier(.65,.05,.36,1) both; } .nws-hero__lead { color: color-mix(in oklch, var(--surface) 88%, transparent); max-width: 56ch; margin-block-end: var(--gap-lg); } .nws-hero__cta { display: flex; gap: var(--gap-sm); flex-wrap: wrap; } .nws-hero__trust { display: flex; gap: var(--gap-xl); flex-wrap: wrap; margin-block-start: var(--gap-xl); padding-block-start: var(--gap-lg); border-block-start: 1px solid color-mix(in oklch, var(--surface) 24%, transparent); list-style: none; font-size: 12.5px; } .nws-hero__trust li { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: color-mix(in oklch, var(--surface) 76%, transparent); } .nws-hero__trust b { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1; color: var(--surface); } .nws-hero__scroll { position: absolute; inset-inline-start: 50%; inset-block-end: 22px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; color: color-mix(in oklch, var(--surface) 74%, transparent); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; } /* the SCROLL cue sits in an HTML-widget wrapper — drop the wrapper box so the cue positions against the hero (bottom-centre), not the wrapper (was showing at the right edge) */ body.nws-site .elementor-element.nws-hero__scroll-wrap { display: contents; } .nws-hero__scroll i { inline-size: 1px; block-size: 34px; background: linear-gradient(color-mix(in oklch, var(--surface) 70%, transparent), transparent); animation: nws-dropline 1.8s ease-in-out infinite; } /* ─── ticker / marquee (native «マーキー(通知バー)» widget) ─────── The container is a bare full-width pass-through; the widget draws the band itself so its background/padding/text are editable in Elementor. Seamlessness is handled by marquee.js (it clones .nws-marquee__group and translates the track by exactly one group width). */ .nws-ticker-band { position: relative; } .nws-marquee { position: relative; background: var(--nws-band, var(--accent)); color: var(--surface); overflow: hidden; padding-block: 16px; } .nws-marquee__mask { overflow: hidden; } .nws-marquee__track { display: flex; inline-size: max-content; } .nws-marquee__group { display: flex; align-items: center; flex: none; } .nws-marquee__item { display: inline-flex; align-items: center; white-space: nowrap; font-family: var(--font-display); font-size: clamp(18px, 2.2vw, 26px); font-weight: 600; padding-inline-end: 52px; color: inherit; text-decoration: none; } .nws-marquee__sep { margin-inline-start: 26px; font-size: 9px; color: var(--accent-2); transform: translateY(1px); } /* Edge fade via gradient OVERLAYS (not mask-image). A `mask` on a parent of a moving, composited track makes some GPUs re-rasterise the mask every frame and flicker; solid overlays in the band colour are flicker-free and keep the text fading into the band. --nws-band follows the widget's background colour. */ .nws-marquee--fade::before, .nws-marquee--fade::after { content: ""; position: absolute; inset-block: 0; inline-size: 72px; z-index: 2; pointer-events: none; } .nws-marquee--fade::before { inset-inline-start: 0; background: linear-gradient(90deg, var(--nws-band, var(--accent)) 0%, transparent 100%); } .nws-marquee--fade::after { inset-inline-end: 0; background: linear-gradient(270deg, var(--nws-band, var(--accent)) 0%, transparent 100%); } /* ─── stats ────────────────────────────────────────────────── */ /* ─── stats band (measurement scale) ───────────────────────── */ .nws-statsband { background: var(--tint); border-block-start: 1px solid var(--border); } .nws-scale { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-start: var(--gap-xl); } .nws-scale::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 1px; background: color-mix(in oklch, var(--accent) 26%, transparent); transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.2,.7,.3,1); } .nws-reveal-line.is-in::before { transform: scaleX(1); } .nws-stat { position: relative; padding-block-start: 24px; padding-inline-end: 24px; } .nws-stat + .nws-stat { padding-inline-start: 26px; border-inline-start: 1px solid var(--border); } .nws-stat::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 2px; block-size: 13px; background: var(--accent); border-radius: 1px; } .nws-stat + .nws-stat::before { inset-inline-start: 26px; } .nws-stat-num { font-family: var(--font-display); font-size: clamp(40px, 5.2vw, 68px); line-height: 1; letter-spacing: -0.02em; color: var(--accent); font-weight: 600; margin: 0; font-variant-numeric: lining-nums; } .nws-stat-u { font-size: 0.42em; color: color-mix(in oklch, var(--accent) 52%, transparent); margin-inline-start: 3px; letter-spacing: 0; } .nws-stat-label { color: var(--fg); font-size: 14.5px; font-weight: 600; margin-block-start: 15px; } .nws-stat-desc { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin-block-start: 7px; } @media (max-width: 820px) { .nws-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; row-gap: 40px; } .nws-scale::before { display: none; } .nws-stat { padding-inline: 0; } .nws-stat + .nws-stat { padding-inline-start: 0; border-inline-start: 0; } .nws-stat + .nws-stat::before { inset-inline-start: 0; } } @media (max-width: 520px) { .nws-scale { grid-template-columns: 1fr; } } /* ─── about split ──────────────────────────────────────────── */ .nws-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, var(--gap-2xl)); align-items: center; } .nws-split--rev { grid-template-columns: 0.95fr 1.05fr; } .nws-split--rev > :first-child { order: 2; } @media (max-width: 920px) { .nws-split, .nws-split--rev { grid-template-columns: 1fr; } .nws-split--rev > :first-child { order: 0; } } .nws-about-list { margin-block-start: var(--gap-lg); display: grid; gap: 14px; list-style: none; padding: 0; } .nws-about-list { font-size: 15px; } .nws-about-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--fg); } .nws-about-list li::before { content: "\2014"; color: var(--accent); font-family: var(--font-mono); } .nws-about-media { position: relative; margin: 0; } .nws-about-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); block-size: auto; } .nws-about-media::after { content: ""; position: absolute; inset-block-end: -14px; inset-inline-end: -14px; inline-size: 46%; block-size: 46%; border: 1px solid var(--accent-2); border-radius: var(--radius-lg); z-index: -1; } /* ─── service cards (grid) ─────────────────────────────────── */ .nws-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); margin-block-start: var(--gap-xl); } @media (max-width: 920px) { .nws-svc-grid { grid-template-columns: 1fr; } /* single-column cards get very wide → a 16:10 thumb would be ~440px tall. Keep the ratio but cap the height so the image stays a banner. */ .nws-svc-card__thumb { max-height: 340px; } } .nws-svc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s cubic-bezier(.2,.7,.3,1), box-shadow 0.3s ease, border-color 0.3s ease; } .nws-svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: color-mix(in oklch, var(--accent) 40%, var(--border)); } .nws-svc-card__thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fg-soft); } .nws-svc-card__thumb .wp-block-image { margin: 0; inline-size: 100%; block-size: 100%; } .nws-svc-card__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(.2,.7,.3,1); } .nws-svc-card:hover .nws-svc-card__thumb img { transform: scale(1.06); } .nws-svc-card__idx { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; z-index: 2; margin: 0; background: color-mix(in oklch, var(--fg) 78%, transparent); color: var(--surface); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; padding: 4px 9px; border-radius: 999px; } .nws-svc-card__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .nws-svc-card__body { font-size: 14px; } .nws-svc-card__body p { margin: 0; color: var(--muted); } .nws-svc-card__more { margin-block-start: auto; padding-block-start: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--accent); } .nws-svc-card h3 a { text-decoration: none; color: inherit; } .nws-svc-card:hover h3 a { color: var(--accent); } /* ─── service detail rows ──────────────────────────────────── */ .nws-svc-detail { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, var(--gap-2xl)); align-items: center; padding-block: clamp(40px, 6vw, 72px); } .nws-svc-detail--rev { grid-template-columns: 0.95fr 1.05fr; } .nws-svc-detail--rev .nws-svc-detail__media { order: 2; } @media (max-width: 920px) { .nws-svc-detail, .nws-svc-detail--rev { grid-template-columns: 1fr; } .nws-svc-detail--rev .nws-svc-detail__media { order: 0; } } .nws-svc-detail__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); margin: 0; } .nws-svc-detail__media img { inline-size: 100%; block-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .nws-svc-no { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--accent); margin: 0 0 10px; } .nws-svc-detail h3 { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; margin: 0 0 12px; } .nws-feat-list { display: grid; gap: 10px; margin-block-start: var(--gap-md); list-style: none; padding: 0; } .nws-feat-list { font-size: 14.5px; } .nws-feat-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--fg); } .nws-feat-list li::before { content: "\2713"; color: var(--accent); font-weight: 700; background: var(--accent-soft); inline-size: 20px; block-size: 20px; border-radius: 6px; display: inline-grid; place-items: center; font-size: 12px; flex: none; margin-block-start: 2px; } .nws-note { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; margin-block-start: var(--gap-xl); background: var(--tint); border-color: color-mix(in oklch, var(--accent) 30%, var(--border)); } .nws-note__text h3 { font-family: var(--font-display); font-size: 20px; } .nws-note__text { font-size: 14.5px; } .nws-note__text p { margin: 8px 0 0; } /* ─── card style ───────────────────────────────────────────── */ .is-style-nws-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; } /* ─── gallery ──────────────────────────────────────────────── */ .nws-gallery { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--gap-md); margin-block-start: var(--gap-xl); } @media (max-width: 920px) { .nws-gallery { grid-template-columns: 1fr; } } .nws-gallery__item { position: relative; border-radius: var(--radius-lg); overflow: hidden; margin: 0; } .nws-gallery__item .wp-block-image { margin: 0; inline-size: 100%; block-size: 100%; } .nws-gallery__item img { inline-size: 100%; block-size: 100%; min-block-size: 260px; object-fit: cover; transition: transform 0.6s ease; } .nws-gallery__item:hover img { transform: scale(1.05); } .nws-gallery__cap { position: absolute; inset-inline: 0; inset-block-end: 0; margin: 0; padding: 18px 20px; color: var(--surface); font-family: var(--font-display); font-size: 15px; background: linear-gradient(to top, color-mix(in oklch, var(--fg) 72%, transparent), transparent); } .nws-gallery__tall { grid-row: span 2; } /* ─── feature grid ─────────────────────────────────────────── */ .nws-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); margin-block-start: var(--gap-xl); } @media (max-width: 920px) { .nws-feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .nws-feature-grid { grid-template-columns: 1fr; } } .nws-feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .nws-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in oklch, var(--accent) 34%, var(--border)); } .nws-ic { inline-size: 40px; block-size: 40px; color: var(--accent); margin-block-end: 16px; } .nws-feature h3 { font-size: 17px; margin-block-end: 6px; } .nws-feature { font-size: 14px; } .nws-feature p { margin: 0; color: var(--muted); } /* ─── spec profile table ───────────────────────────────────── */ .nws-spec-table { margin: 0; } .nws-spec-table table { inline-size: 100%; border-collapse: collapse; margin-block-start: var(--gap-lg); } .nws-spec-table th, .nws-spec-table td { text-align: start; padding: 16px 18px; border-block-end: 1px solid var(--border); font-size: 14.5px; vertical-align: top; } .nws-spec-table th { inline-size: 30%; font-weight: 700; color: var(--fg); background: var(--fg-soft); font-family: var(--font-display); } .nws-spec-table td { color: var(--muted); } @media (max-width: 640px) { .nws-spec-table th, .nws-spec-table td { display: block; inline-size: 100%; } .nws-spec-table th { border-block-end: 0; background: transparent; padding-block-end: 4px; } .nws-spec-table td { padding-block-start: 0; } } /* ─── flow steps ───────────────────────────────────────────── */ .nws-flow-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); margin-block-start: var(--gap-xl); position: relative; } @media (max-width: 920px) { .nws-flow-track { grid-template-columns: 1fr; } } .nws-flow-step { position: relative; padding-block-start: var(--gap-lg); } .nws-flow-step::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 2px; background: var(--border); } .nws-flow-step::after { content: ""; position: absolute; inset-block-start: -3px; inset-inline-start: 0; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .nws-flow-num { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--accent-2); line-height: 1; margin: 0; } .nws-flow-step h3 { margin: 10px 0 6px; } .nws-flow-step { font-size: 14.5px; } .nws-flow-step p { margin: 0; color: var(--muted); } /* ─── timeline (process page) ──────────────────────────────── */ .nws-timeline { margin-block-start: var(--gap-xl); position: relative; padding-inline-start: 40px; } .nws-timeline::before { content: ""; position: absolute; inset-inline-start: 11px; inset-block: 6px; inline-size: 2px; background: linear-gradient(var(--accent), var(--accent-2)); } .nws-tl-item { position: relative; padding-block-end: var(--gap-xl); } .nws-tl-item:last-child { padding-block-end: 0; } .nws-tl-item::before { content: ""; position: absolute; inset-inline-start: -34px; inset-block-start: 4px; inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); } .nws-tl-when { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--accent); margin: 0; } .nws-tl-item h3 { margin: 6px 0; } .nws-tl-item p { margin: 0; color: var(--muted); } .nws-doc-list { display: grid; gap: 14px; list-style: none; padding: 0; margin: 0; } .nws-doc-list { font-size: 15px; } .nws-doc-list li { display: flex; gap: 12px; align-items: baseline; color: var(--fg); } .nws-doc-list li::before { content: ""; flex: none; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent-2); transform: translateY(-2px); } /* ─── quote ────────────────────────────────────────────────── */ .nws-quote-wrap { --width: min(100%, 820px); max-width: var(--width); } .nws-quote-mark { font-family: var(--font-display); font-size: 120px; line-height: 0.6; color: var(--accent-2); } .nws-quote { border: 0; padding: 0; margin: var(--gap-md) 0 0; background: transparent; } .nws-quote { font-size: clamp(22px, 2.6vw, 30px); font-family: var(--font-display); } .nws-quote p { line-height: 1.5; margin: 0; } .nws-quote cite { color: var(--muted); font-size: 14px; font-style: normal; display: block; margin-block-start: var(--gap-md); font-family: var(--font-mono); } .nws-quote-author { color: var(--muted); font-size: 14px; font-family: var(--font-mono); } /* ─── values band ──────────────────────────────────────────── */ .is-style-nws-values { background: var(--band-gradient) #46B25E; color: var(--surface); } .is-style-nws-values .nws-lead { color: color-mix(in oklch, var(--surface) 80%, transparent); } .is-style-nws-values .nws-eyebrow { color: var(--accent-2); } .is-style-nws-values .nws-eyebrow::before { background: var(--accent-2); } .is-style-nws-values h2 { color: var(--surface); } .nws-values-media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); margin-block-start: var(--gap-xl); } @media (max-width: 920px) { .nws-values-media { grid-template-columns: 1fr; } } .nws-values-media .wp-block-image { margin: 0; } .nws-values-media img { inline-size: 100%; block-size: 300px; object-fit: cover; border-radius: var(--radius-lg); } /* ─── news ─────────────────────────────────────────────────── */ .nws-news-feature { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--gap-xl); align-items: center; margin-block-end: var(--gap-xl); } @media (max-width: 920px) { .nws-news-feature { grid-template-columns: 1fr; } } .nws-news-feature .wp-block-post-featured-image { margin: 0; } .nws-news-feature img { inline-size: 100%; block-size: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); } .nws-news-feature__body .wp-block-post-date { font-family: var(--font-mono); } .nws-news-feature__body h3 { margin: 10px 0 12px; } .nws-news-feature__body .wp-block-post-excerpt p { color: var(--muted); margin: 0; } .nws-newsitem { display: grid; grid-template-columns: 130px 1fr auto; gap: var(--gap-lg); padding: 22px 0; border-block-start: 1px solid var(--border); align-items: baseline; transition: padding-inline-start 0.25s ease; } .nws-newsitem:hover { padding-inline-start: 10px; } .nws-newsitem h3, .nws-newsitem .wp-block-post-title { font-size: 18px; margin: 0; } .nws-newsitem .wp-block-post-title a { text-decoration: none; color: inherit; } .nws-newsitem .wp-block-post-title a:hover { color: var(--accent); } .nws-newsitem .nws-cat, .nws-newsitem .wp-block-post-terms { text-align: end; } @media (max-width: 920px) { .nws-newsitem { grid-template-columns: 1fr; gap: 8px; } .nws-newsitem .nws-cat, .nws-newsitem .wp-block-post-terms { text-align: start; } } .nws-tag a, .nws-cat a { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid color-mix(in oklch, var(--accent) 40%, var(--border)); color: var(--accent); border-radius: 999px; font-size: 11.5px; font-family: var(--font-mono); white-space: nowrap; text-decoration: none; } .nws-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-block-end: var(--gap-lg); } .nws-chip { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 8px 16px; font-size: 13px; cursor: pointer; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .nws-chip:hover { border-color: var(--accent); color: var(--fg); } .nws-chip[aria-pressed="true"] { background: var(--accent); color: var(--surface); border-color: var(--accent); } .nws-newsitem[hidden] { display: none; } /* ─── price table ──────────────────────────────────────────── */ .nws-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); margin-block-start: var(--gap-xl); } @media (max-width: 920px) { .nws-price-grid { grid-template-columns: 1fr; } } .nws-price-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 14px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .nws-price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .nws-price-card--featured { border-color: var(--accent); box-shadow: var(--shadow); } .nws-plan { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 0; } .nws-price { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--accent); line-height: 1; margin: 0; } .nws-price-grid .wp-block-list { display: grid; gap: 10px; margin: 6px 0 0; list-style: none; padding: 0; } .nws-price-grid .wp-block-list { font-size: 14px; } .nws-price-grid .wp-block-list li { display: flex; gap: 8px; color: var(--muted); } .nws-price-grid .wp-block-list li::before { content: "\2022"; color: var(--accent-2); } .nws-price-note { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-block-start: var(--gap-md); } /* ─── interior page hero ───────────────────────────────────── */ .nws-pagehero { position: relative; overflow: clip; background: var(--accent); color: var(--surface); padding-block: clamp(72px, 11vw, 128px); } .nws-pagehero__media { position: absolute; inset: 0; margin: 0; z-index: 0; } .nws-pagehero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.95; } .nws-pagehero__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, color-mix(in oklch, var(--accent) 46%, transparent), color-mix(in oklch, var(--fg) 16%, transparent)); } .nws-pagehero__grid { position: absolute; inset: 0; z-index: 1; opacity: 0.4; background-image: linear-gradient(color-mix(in oklch, var(--surface) 12%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--surface) 12%, transparent) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(90% 120% at 100% 0%, black, transparent 70%); -webkit-mask-image: radial-gradient(90% 120% at 100% 0%, black, transparent 70%); } .nws-pagehero .nws-container { position: relative; z-index: 2; } .nws-crumb { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; color: color-mix(in oklch, var(--surface) 78%, transparent); display: flex; gap: 8px; margin-block-end: 18px; } .nws-crumb a { color: inherit; text-decoration: none; } .nws-crumb a:hover { color: var(--accent-2); } .nws-pagehero h1 { color: var(--surface); font-size: clamp(34px, 4.8vw, 60px); margin-block-end: 16px; } .nws-pagehero .nws-lead { color: color-mix(in oklch, var(--surface) 86%, transparent); } /* ─── CTA strip ────────────────────────────────────────────── */ .is-style-nws-cta { position: relative; overflow: hidden; background: var(--band-gradient) #46B25E; color: var(--surface); text-align: center; } .is-style-nws-cta::before { content: ""; position: absolute; inset-block-start: -40%; inset-inline: -10%; block-size: 90%; background: radial-gradient(closest-side, color-mix(in oklch, var(--accent-2) 34%, transparent), transparent); opacity: 0.45; } :where(.is-style-nws-cta) .nws-container { position: relative; --width: min(100%, 640px); max-width: var(--width); } .is-style-nws-cta h2 { color: var(--surface); } .is-style-nws-cta .nws-lead { color: color-mix(in oklch, var(--surface) 84%, transparent); margin: 16px auto 32px; } .is-style-nws-cta .nws-eyebrow { color: var(--accent-2); justify-content: center; } .is-style-nws-cta .wp-block-button__link { background: var(--surface); color: var(--accent); border-color: var(--surface); } .is-style-nws-cta .wp-block-button__link:hover { background: var(--accent-2); color: var(--fg); } .nws-cta-buttons { justify-content: center; } .nws-cta-contact { margin-block-start: 22px; font-family: var(--font-mono); font-size: 13px; color: color-mix(in oklch, var(--surface) 82%, transparent); } /* ─── contact form ─────────────────────────────────────────── */ .nws-contact-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(32px, 5vw, var(--gap-2xl)); align-items: start; } @media (max-width: 920px) { .nws-contact-grid { grid-template-columns: 1fr; } } .nws-form .field { display: flex; flex-direction: column; gap: 7px; margin-block-end: 20px; } .nws-form .field > label { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .nws-form .req { font-family: var(--font-mono); font-size: 10.5px; color: var(--surface); background: var(--accent); border-radius: 4px; padding: 2px 6px; letter-spacing: 0.06em; } .nws-form .opt { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; } .nws-form input, .nws-form select, .nws-form textarea { inline-size: 100%; font: inherit; font-size: 15px; color: var(--fg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .nws-form textarea { min-block-size: 140px; resize: vertical; } /* The theme (Astra) forces `height:40px` on ; with our 12px block padding the select's content box was only 14px — smaller than its line box — so the option text was vertically clipped in BOTH languages. Trim the select's block padding so the text fits while keeping the 40px field height. */ .nws-form select { padding-block: 6px; line-height: 1.5; } .nws-form input:hover, .nws-form select:hover, .nws-form textarea:hover { border-color: color-mix(in oklch, var(--accent) 40%, var(--border)); } .nws-form input:focus, .nws-form select:focus, .nws-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .nws-form .field.is-invalid input, .nws-form .field.is-invalid select, .nws-form .field.is-invalid textarea { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 14%, transparent); } .nws-form .err { font-size: 12.5px; color: var(--danger); display: none; } .nws-form .field.is-invalid .err { display: block; } .nws-form .field-consent > label { font-weight: 400; color: var(--muted); align-items: flex-start; gap: 10px; } .nws-form .field-consent input { inline-size: auto; margin-block-start: 3px; } .nws-form .form-note { font-size: 12.5px; color: var(--muted); margin-block-start: 4px; } .nws-form .form-alert { color: var(--danger); } /* 「プライバシーポリシーを見る」ボタン（同意欄の下） */ .nws-pp-open { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--fg); text-decoration: none; background: var(--surface); transition: border-color .2s ease, color .2s ease, background-color .2s ease; } .nws-pp-open::after { content: "\2197"; font-size: 12px; color: var(--accent); } .nws-pp-open:hover { border-color: var(--accent); color: var(--accent); background: var(--tint); } .form-success { text-align: center; padding: 48px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--tint); } .form-success svg { inline-size: 48px; block-size: 48px; color: var(--accent); margin: 0 auto 16px; } .form-success__body { color: var(--muted); margin: 8px 0 0; } .nws-info-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; } .nws-info-card h3 { font-size: 16px; margin-block-end: 14px; } .nws-info-row { padding: 12px 0; border-block-start: 1px solid var(--border); font-size: 14px; color: var(--muted); } .nws-info-row:first-of-type { border-block-start: 0; } .nws-info-row b { display: block; color: var(--fg); font-size: 13px; margin-block-end: 2px; font-family: var(--font-mono); letter-spacing: 0.04em; } /* ─── 404 ──────────────────────────────────────────────────── */ .nws-404 { text-align: center; } .nws-404 .nws-measure { margin-inline: auto; } .nws-404 .wp-block-buttons { justify-content: center; } /* ─── reveal + tilt ────────────────────────────────────────── */ .nws-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.3,1); will-change: opacity, transform; } .nws-reveal.is-in { opacity: 1; transform: none; } .nws-reveal-x { opacity: 0; transform: translateX(-30px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.3,1); } .nws-reveal-x.is-in { opacity: 1; transform: none; } .nws-reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.3,1); } .nws-reveal-scale.is-in { opacity: 1; transform: none; } .nws-tilt { transform-style: preserve-3d; transition: transform 0.35s cubic-bezier(.2,.7,.3,1), box-shadow 0.35s ease; } .nws-tilt:hover { transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(-8px); } /* ─── boot overlay ─────────────────────────────────────────── */ .nws-boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 105% at 50% 26%, #3AAE49 0%, #2C8F38 52%, #1D6A28 100%); transition: transform 0.55s cubic-bezier(.76,0,.24,1) 0.08s; } .nws-boot::before { content: ""; position: absolute; inset: 0; background: radial-gradient(64% 48% at 50% 42%, color-mix(in oklch, #8FD39A 42%, transparent), transparent 72%); } .nws-boot__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 24px; text-align: center; transition: opacity 0.4s ease, transform 0.4s ease; } .nws-boot__emblem { animation: nws-bootspin 9s cubic-bezier(.45,.05,.25,1) infinite; filter: drop-shadow(0 16px 42px color-mix(in oklch, var(--fg) 62%, transparent)); } .nws-boot__mark { inline-size: clamp(88px, 14vw, 124px); block-size: auto; display: block; animation: nws-bootmark 1s cubic-bezier(.2,.7,.2,1) both; } .nws-boot__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2.8vw, 26px); letter-spacing: 0.06em; color: var(--surface); animation: nws-bootrise 0.7s cubic-bezier(.2,.7,.2,1) 0.34s both; } .nws-boot__sub { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.36em; color: color-mix(in oklch, var(--surface) 86%, transparent); animation: nws-bootrise 0.7s cubic-bezier(.2,.7,.2,1) 0.46s both; } .nws-boot__bar { inline-size: clamp(150px, 24vw, 224px); block-size: 2px; border-radius: 2px; overflow: hidden; background: color-mix(in oklch, var(--surface) 24%, transparent); } .nws-boot__bar i { display: block; block-size: 100%; inline-size: 100%; background: var(--surface); transform-origin: left center; animation: nws-bootbar 0.8s cubic-bezier(.45,.05,.2,1) 0.12s both; } .nws-boot.is-done { transform: translateY(-101%); } .nws-boot.is-done .nws-boot__inner { opacity: 0; transform: translateY(-14px); } /* ─── keyframes ────────────────────────────────────────────── */ @keyframes nws-kenburns { from { transform: scale(1.02); } to { transform: scale(1.14); } } @keyframes nws-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes nws-spinmark { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes nws-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes nws-dropline { 0%,100% { transform: scaleY(0.4); opacity: 0.4; transform-origin: top; } 50% { transform: scaleY(1); opacity: 1; transform-origin: top; } } @keyframes nws-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes nws-slidein { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes nws-bootmark { from { opacity: 0; transform: scale(0.5) rotate(-120deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes nws-bootspin { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes nws-bootrise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes nws-bootbar { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ─── small-screen header tuning ───────────────────────────── */ @media (max-width: 620px) { .nws-topnav-inner { padding-block: 9px; gap: 8px; } .nws-brand { gap: 9px; min-inline-size: 0; } .nws-brandmark { inline-size: 26px; block-size: 26px; } .nws-brandtext { min-inline-size: 0; } .nws-brandtext b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nws-brandtext span { font-size: 8px; letter-spacing: 0.16em; } .nws-navtools { flex: none; gap: 10px; } .nws-topnav .nws-btn { flex: none; padding: 6px 12px; font-size: 11.5px; gap: 0; box-shadow: none; white-space: nowrap; } .nws-topnav .nws-btn-arrow::after { display: none; } .nws-navtoggle { inline-size: 34px; block-size: 34px; } } @media (max-width: 380px) { .nws-brandtext span { display: none; } } /* Elementor header bridge for small screens: the .nws-btn class sits on the widget wrapper, so the block-theme mobile rules above never reach the inner Elementor button. Hide the header CTA (the drawer carries one) and keep the toggle at its intended size (Astra otherwise inflates it). */ @media (max-width: 620px) { body.nws-site .nws-navtools .elementor-element.nws-btn { display: none; } body.nws-site .nws-navtoggle { padding: 0 !important; inline-size: 36px; block-size: 36px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-size: 0; line-height: 0; background: transparent; border: 1px solid var(--border); border-radius: 10px; } body.nws-site .nws-navtoggle svg { inline-size: 18px; block-size: 18px; display: block; } body.nws-site .nws-topnav-inner > .elementor-element:first-child { flex: 1 1 auto; min-inline-size: 0; } body.nws-site .nws-brand { min-inline-size: 0; } } /* drawer close button — reset Astra's global button padding */ body.nws-site .nws-drawer-close { padding: 0 !important; box-sizing: border-box; line-height: 0; } body.nws-site .nws-drawer-close svg { inline-size: 18px; block-size: 18px; } /* ─── reduced motion ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .nws-site *, .nws-site *::before, .nws-site *::after { animation: none !important; transition: none !important; } .nws-reveal, .nws-reveal-x, .nws-reveal-scale { opacity: 1 !important; transform: none !important; } .nws-scale::before { transform: none !important; } .nws-hero__media img { animation: none !important; } html { scroll-behavior: auto; } } /* ─── single news / misc structural hooks ──────────────────── */ .nws-single .wp-block-post-title { margin-block: 8px 24px; } .nws-single .nws-single-hero { margin: 0 0 var(--gap-lg); } .nws-single .nws-single-hero img { border-radius: var(--radius-lg); } .nws-main-blank { padding-block: clamp(56px, 8vw, var(--gap-2xl)); } /* ─── template helper bits (404 / search / single news) ────── */ .nws-404-actions { justify-content: center; } .nws-backlink { margin-block-start: var(--gap-lg); } .nws-searchform { display: flex; gap: var(--gap-sm); flex-wrap: wrap; max-width: 520px; margin-block-end: var(--gap-lg); } .nws-searchform input[type="search"] { flex: 1 1 220px; font: inherit; font-size: 15px; color: var(--fg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; } .nws-searchform input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .nws-searchform button { border: 1px solid var(--accent); background: var(--accent); color: var(--surface); border-radius: var(--radius); padding: 12px 20px; font: inherit; font-weight: 700; cursor: pointer; } .nws-searchform button:hover { filter: brightness(0.9); } /* News archive pagination + single post prev/next */ .nws-pagination { margin-block-start: var(--gap-lg); } .nws-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; color: inherit; text-decoration: none; font-weight: 700; font-size: 14px; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .nws-pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); } .nws-pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: var(--surface); } .nws-postnav { display: flex; flex-wrap: wrap; gap: 16px var(--gap-lg); justify-content: space-between; align-items: baseline; margin-block-start: var(--gap-lg); padding-block-start: 24px; border-block-start: 1px solid var(--border); } .nws-postnav .wp-block-post-navigation-link { max-width: 46%; } .nws-postnav a { color: inherit; text-decoration: none; font-weight: 700; } .nws-postnav a:hover { color: var(--accent); } .nws-postnav .post-navigation-link-next { margin-inline-start: auto; text-align: end; } @media (max-width: 640px) { .nws-postnav .wp-block-post-navigation-link { max-width: 100%; } } /* Footer group-company link button */ .nws-group-link { display: flex; justify-content: center; margin-block-start: 28px; } .nws-group-link__btn { display: inline-flex; align-items: center; gap: 0.5em; padding: 12px 24px; border: 1px solid color-mix(in oklch, currentColor 40%, transparent); border-radius: 999px; color: inherit; text-decoration: none; font-weight: 700; font-size: 14px; opacity: 0.9; transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .nws-group-link__btn::after { content: "\2197"; font-size: 0.9em; line-height: 1; } .nws-group-link__btn:hover { opacity: 1; border-color: currentColor; background: color-mix(in oklch, currentColor 8%, transparent); } /* ══════════════════════════════════════════════════════════════ Part 3/3 — Elementor + Astra integration bridge. ══════════════════════════════════════════════════════════════ */ /* base typography/colour (beats Astra; component CSS still wins ties) */ body.nws-site{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} body.nws-site a{color:inherit} /* Astra container/entry neutralisation */ body.nws-site .ast-container{max-width:none;padding-inline:0} body.nws-site .site-content .ast-container,body.nws-site #content .ast-container{max-width:none;padding:0} body.nws-site .entry-content,body.nws-site .entry-content>.elementor{margin:0;max-width:none} body.nws-site .entry-content>*{margin-block-start:0} body.nws-site .ast-single-post .entry-header,body.nws-site .ast-archive-description,body.nws-site .entry-header{display:none} body.nws-site .site-content,body.nws-site #content,body.nws-site #page{margin:0;padding:0} body.nws-site .ast-separate-container,body.nws-site .ast-plain-container{background:none} /* Astra "scroll to top" button — brand green */ body.nws-site .ast-scroll-top{background-color:var(--accent)} body.nws-site .ast-scroll-top:hover{background-color:color-mix(in oklch,var(--accent) 86%, black)} body.nws-site .ast-scroll-top .ast-icon.icon-arrow svg{fill:var(--surface)} /* Elementor containers → theme layout (do NOT touch width/max-width) */ body.nws-site .e-con[class*="nws-"]{--gap:0;--row-gap:0;--column-gap:0;--padding:0;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px} body.nws-site .e-con[class*="nws-"]>.e-con-inner{display:contents} body.nws-site .elementor-widget-container{margin:0;padding:0} body.nws-site .elementor-widget-image img{vertical-align:middle;display:inline-block} /* widget-wrapper bridges for inline text classes */ body.nws-site .elementor-element.nws-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 var(--gap-md)} body.nws-site .elementor-element.nws-eyebrow::before{content:"";inline-size:22px;block-size:1px;background:var(--accent);flex:none} body.nws-site .elementor-element.nws-eyebrow.nws-eyebrow--bare::before{display:none} body.nws-site .elementor-element.nws-eyebrow p,body.nws-site .elementor-element.nws-eyebrow .elementor-text-editor p{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0;line-height:1.4} body.nws-site .elementor-element.nws-lead p,body.nws-site .elementor-element.nws-lead .elementor-text-editor p{line-height:1.7;color:var(--muted);max-width:62ch;margin:0} body.nws-site .elementor-element.nws-meta p{font-family:var(--font-mono);color:var(--muted);margin:0} body.nws-site .elementor-element.nws-muted p{color:var(--muted)} /* hero text colours */ body.nws-site .nws-hero__content .elementor-heading-title{color:var(--surface)} body.nws-site .elementor-element.nws-hero__lead p,body.nws-site .nws-hero__lead p{color:color-mix(in oklch,var(--surface) 88%,transparent);max-width:56ch;margin-block-end:var(--gap-lg)} body.nws-site .elementor-element.nws-hero__eyebrow p{color:color-mix(in oklch,var(--surface) 84%,transparent)} body.nws-site .elementor-element.nws-hero__eyebrow::before{background:color-mix(in oklch,var(--surface) 70%,transparent)} body.nws-site .elementor-element.nws-hero__title{margin-block-end:var(--gap-md)} /* section head blocks */ body.nws-site .elementor-element.nws-sec-head--center{margin-inline:auto;text-align:center} body.nws-site .elementor-element.nws-sec-head--center .elementor-element.nws-eyebrow{justify-content:center} body.nws-site .elementor-element.nws-sec-head .elementor-widget-heading{margin-block-end:var(--gap-md)} /* buttons (class lands on the widget wrapper) */ body.nws-site .nws-btn .elementor-button{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:var(--radius);border:1px solid transparent;font-size:15px;font-weight:700;line-height:1.2;letter-spacing:.01em;transition:transform .15s ease,background .2s ease,border-color .2s ease,box-shadow .25s ease,color .2s ease} body.nws-site .nws-btn-primary .elementor-button{background:var(--accent);color:var(--surface);border-color:var(--accent);box-shadow:var(--shadow)} body.nws-site .nws-btn-primary .elementor-button:hover{background:color-mix(in oklch,var(--accent) 88%,black);color:var(--surface);transform:translateY(-2px);box-shadow:var(--shadow-lg)} body.nws-site .nws-btn-secondary .elementor-button{background:var(--surface);color:var(--fg);border-color:var(--border);box-shadow:none} body.nws-site .nws-btn-secondary .elementor-button:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)} body.nws-site .nws-btn-arrow .elementor-button::after{content:"\2192";transition:transform .2s ease} body.nws-site .nws-btn-arrow .elementor-button:hover::after{transform:translateX(4px)} body.nws-site .elementor-widget-button{text-align:inherit} /* block buttons inside imported content — outrank Astra's global button colour */ body.nws-site .wp-block-button__link{background:var(--accent);color:var(--surface);border-color:var(--accent);box-shadow:var(--shadow)} body.nws-site .wp-block-button__link:hover{background:color-mix(in oklch,var(--accent) 88%,black);color:var(--surface);transform:translateY(-2px);box-shadow:var(--shadow-lg)} body.nws-site .is-style-nws-secondary .wp-block-button__link{background:var(--surface);color:var(--fg);border-color:var(--border);box-shadow:none} body.nws-site .is-style-nws-secondary .wp-block-button__link:hover{border-color:var(--accent);color:var(--accent)} body.nws-site .is-style-nws-cta .wp-block-button__link{background:var(--surface);color:var(--accent);border-color:var(--surface)} body.nws-site .is-style-nws-cta .wp-block-button__link:hover{background:var(--surface);color:color-mix(in oklch,var(--accent) 80%,black)} /* images */ body.nws-site .elementor-element.nws-round img{border-radius:var(--radius-lg)} body.nws-site .elementor-element.nws-hero__media{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:0;max-width:none} body.nws-site .elementor-element.nws-hero__media img{inline-size:100%;block-size:100%;object-fit:cover;animation:nws-kenburns 26s ease-in-out alternate infinite;will-change:transform} body.nws-site .elementor-element.nws-about-media{position:relative;margin:0;z-index:0} body.nws-site .elementor-element.nws-about-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)} body.nws-site .elementor-element.nws-values-media img,body.nws-site .nws-values-media img{inline-size:100%;block-size:300px;object-fit:cover;border-radius:var(--radius-lg)} /* flex directions (Elementor containers default to column) */ body.nws-site .e-con.nws-hero{flex-direction:row;align-items:center} body.nws-site .e-con.nws-topnav-inner,body.nws-site .e-con.nws-nav,body.nws-site .e-con.nws-navtools,body.nws-site .e-con.nws-ticker-band{flex-direction:row;flex-wrap:nowrap;align-items:center} body.nws-site .e-con.nws-row-between,body.nws-site .e-con.nws-hero__cta,body.nws-site .e-con.nws-hero__trust,body.nws-site .e-con.nws-cta-buttons,body.nws-site .e-con.nws-foot-wrap,body.nws-site .e-con.nws-note{flex-direction:row;flex-wrap:wrap} /* our section stacks are single-column — Elementor containers default to flex-wrap:wrap, which mis-sizes their flex lines at its mobile breakpoint (the map widget collapsed to 324px over 584px of content and spilled onto the section below). These never wrap. */ body.nws-site .e-con.nws-container,body.nws-site .e-con.nws-section{flex-wrap:nowrap;align-content:flex-start} body.nws-site .e-con.nws-navtools{align-items:center} /* grid children stretch their component to fill the row height */ body.nws-site .nws-svc-grid>.elementor-element>.elementor-widget-container, body.nws-site .nws-scale>.elementor-element>.elementor-widget-container, body.nws-site .nws-feature-grid>.elementor-element>.elementor-widget-container, body.nws-site .nws-flow-track>.elementor-element>.elementor-widget-container, body.nws-site .nws-price-grid>.elementor-element>.elementor-widget-container, body.nws-site .nws-grid-2>.elementor-element>.elementor-widget-container, body.nws-site .nws-grid-3>.elementor-element>.elementor-widget-container, body.nws-site .nws-grid-4>.elementor-element>.elementor-widget-container{height:100%} body.nws-site .nws-svc-card,body.nws-site .nws-feature,body.nws-site .nws-price-card,body.nws-site .nws-flow-step{height:100%} /* news bits inside HTML widgets */ body.nws-site .nws-news-feature__body p,body.nws-site .nws-excerpt{color:var(--muted);margin:0} body.nws-site .nws-news-feature__img{margin:0} body.nws-site .nws-news-feature__img img{border-radius:var(--radius-lg);box-shadow:var(--shadow)} /* sticky Xpro header */ body.nws-site .xpro-theme-builder-header{position:sticky;top:0;z-index:40} body.admin-bar .xpro-theme-builder-header{top:32px} @media(max-width:782px){body.admin-bar .xpro-theme-builder-header{top:46px}} /* header: keep brand / nav / tools at natural size (no squeeze), never wrap */ body.nws-site .nws-topnav-inner>.elementor-element{flex:0 0 auto;min-width:0} body.nws-site .e-con.nws-navtools>.elementor-element{flex:0 0 auto} body.nws-site .nws-brand,body.nws-site .nws-brandtext b,body.nws-site .nws-brandtext>span{white-space:nowrap} body.nws-site .nws-nav a{white-space:nowrap} body.nws-site .nws-topnav-inner{justify-content:space-between;align-items:center} body.nws-site .nws-navtools{align-items:center} /* header tools container must hug its content (Elementor e-con-full forces width:100%) */ body.nws-site .e-con.nws-navtools{flex:0 0 auto} /* neutralise the button classes when they sit on an Elementor wrapper (the class is meant for the inner ) */ body.nws-site .elementor-element.nws-btn, body.nws-site .elementor-element.nws-btn-primary, body.nws-site .elementor-element.nws-btn-secondary, body.nws-site .elementor-element.nws-btn-arrow{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important;transform:none!important;color:inherit!important;display:block;width:auto} body.nws-site .elementor-element.nws-btn-arrow::after{content:none!important} body.nws-site .elementor-element.nws-btn:hover{transform:none!important;box-shadow:none!important;background:none!important} /* hero layers: media below, scrim (veil/grid/spotlight) above media, content on top */ body.nws-site .nws-hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none} body.nws-site .nws-hero__scrim>.elementor-widget-container{position:absolute;inset:0} body.nws-site .nws-hero>.elementor-element.nws-hero__media{z-index:0} body.nws-site .nws-hero>.e-con{position:relative;z-index:2} /* ══════════════════════════════════════════════════════════════ Part 4/4 — fully-native component bridge. Every home-section content element is now a native Elementor widget; these rules let the existing .nws-* component CSS target the widget (wrapper div + bare text node) instead of raw
  • /

    . ══════════════════════════════════════════════════════════════ */ /* text-editor widgets emit bare text; zero paragraph margins so the component CSS owns all spacing */ body.nws-site .elementor-widget-text-editor p{margin:0} body.nws-site .elementor-widget-text-editor:has(> ul), body.nws-site .elementor-widget-text-editor:has(> ol){margin:0} /* constrained section wrapper (native .nws-container is an .e-con) */ body.nws-site .e-con.nws-container{margin-inline:auto;padding-inline:clamp(20px,4vw,32px)} /* …but a measured container (legal copy) keeps its narrow measure */ /* service card — image fills the 16/10 thumb, idx badge floats above */ body.nws-site .nws-svc-card__thumb{position:relative} body.nws-site .nws-svc-card__thumb>.elementor-widget-image{position:absolute;inset:0;z-index:0;margin:0} body.nws-site .nws-svc-card__thumb>.elementor-widget-image img{inline-size:100%;block-size:100%;object-fit:cover} body.nws-site .nws-svc-card__idx{z-index:2} /* service cards: make the hover tilt/lift win over .nws-reveal.is-in's transform:none */ body.nws-site .nws-svc-card.nws-reveal.is-in:hover{transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(-8px)} /* gallery — image fills its cell, caption overlays the bottom */ body.nws-site .nws-gallery__item>.elementor-widget-image{position:absolute;inset:0;margin:0} body.nws-site .nws-gallery__item>.elementor-widget-image img{inline-size:100%;block-size:100%;object-fit:cover} /* hero trust: was