/* ========================================================================== Dream Star Basketball Academy — Prototype V4 DESIGN PROTOTYPE ONLY — not production code, not final copy. Scope: HERO + HEADER/NAV only. Rest of homepage is minimal anchor placeholders so links/CTAs/rail have a real destination. Hero backgrounds are pure photography (no baked-in UI) — every piece of interface (header, nav, CTAs, rail) is real HTML/CSS/JS on top. ========================================================================== */ /* Fonts are now loaded via + in each page's instead of @import here — @import blocks CSSOM construction and delays font discovery until this whole file is parsed; a lets the browser's preload scanner find and fetch the font stylesheet immediately while parsing the HTML. */ :root{ --color-black: #0A0A0B; --color-charcoal: #17181B; --color-white: #FFFFFF; --color-offwhite: #F7F4EC; --color-neutral-200: #E7E2D6; --color-neutral-500: #86816F; --color-orange: #E8611E; --color-orange-deep: #B93E0C; --color-orange-bright:#FF7A28; --color-orange-soft: #F5A56A; --color-skilllab-blue: #2AA6E0; --color-skilllab-blue-deep: #14536E; --color-skilllab-blue-dark: #0E2530; --font-display: 'Oswald', 'Noto Sans JP', sans-serif; --font-body: 'Inter', 'Noto Sans JP', sans-serif; --font-jp: 'Noto Sans JP', 'Inter', sans-serif; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; --container: 1280px; --header-h: 84px; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:auto; } html.smooth-scroll{ scroll-behavior:smooth; } html,body{ overflow-x:hidden; max-width:100%; } body{ margin:0; background:var(--color-offwhite); color:var(--color-black); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } h1,h2,h3{ font-family:var(--font-display); margin:0; } .container{ max-width:var(--container); margin:0 auto; padding:0 var(--space-3); } .nums{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-body); font-weight:700; font-size:0.95rem; letter-spacing:0.02em; padding:0.95em 1.9em; border-radius:3px; border:2px solid transparent; cursor:pointer; transition:transform 200ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease; } @media (hover:hover) and (pointer:fine){ .btn:hover{ transform:scale(1.025); } } .btn:active{ transform:scale(0.98); } .btn-primary{ background:var(--color-orange); color:#fff; } .btn-primary:hover{ background:var(--color-orange-deep); } .btn-outline-light{ background:rgba(255,255,255,0.06); color:#fff; border-color:rgba(255,255,255,0.6); } .btn-outline-light:hover{ border-color:#fff; background:rgba(255,255,255,0.12); } .btn-outline-dark{ background:transparent; color:var(--color-black); border-color:rgba(10,10,11,0.5); } .btn-outline-dark:hover{ border-color:var(--color-black); } .btn-dark{ background:var(--color-black); color:#fff; } .btn-dark:hover{ background:#000; } .btn-skilllab{ background:var(--color-skilllab-blue); color:#04202b; } .btn-skilllab:hover{ background:#3fb6ee; } .btn-onorange{ background:var(--color-black); color:#fff; } /* ---------- Header ---------- */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:100; height:var(--header-h); background:rgba(10,10,11,0.28); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,0.12); transition:background-color 300ms ease, border-color 300ms ease; } .site-header.is-scrolled{ background:rgba(10,10,11,0.72); } .site-header .container{ display:flex; align-items:center; justify-content:space-between; height:100%; gap:var(--space-3); } .brand{ display:flex; align-items:center; gap:0.7em; flex:none; } .brand img{ height:56px; width:auto; } .brand-type{ line-height:1.05; color:#fff; } .brand-type strong{ display:block; font-family:var(--font-display); font-size:1.32rem; letter-spacing:0.025em; font-weight:700; } .brand-type span{ display:block; font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.65); font-weight:600; } .main-nav{ display:flex; align-items:center; gap:var(--space-4); flex:1; justify-content:flex-end; } .main-nav ul{ display:flex; gap:var(--space-3); } .main-nav a{ font-size:0.88rem; font-weight:600; color:#fff; position:relative; padding:0.3em 0; } .main-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--color-orange); transform:scaleX(0); transform-origin:left; transition:transform 200ms ease; } .main-nav a:hover::after{ transform:scaleX(1); } .lang-toggle{ display:flex; align-items:center; gap:0.3em; font-size:0.78rem; font-weight:700; letter-spacing:0.04em; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.25); border-radius:20px; padding:0.25em 0.35em; } .lang-toggle a, .lang-toggle .lang-current{ font:inherit; padding:0.3em 0.7em; border-radius:16px; transition:background-color 200ms ease, color 200ms ease; } .lang-toggle a{ color:rgba(255,255,255,0.6); } .lang-toggle a:hover{ color:#fff; } .lang-toggle .lang-current{ background:var(--color-orange); color:#fff; } .header-cta{ flex:none; } .header-cta .btn{ padding:0.7em 1.4em; font-size:0.86rem; } .nav-toggle{ display:none; appearance:none; -webkit-appearance:none; background:transparent; border:none; cursor:pointer; flex-direction:column; gap:5px; padding:0.5em; -webkit-tap-highlight-color:transparent; } .nav-toggle span{ width:24px; height:2px; background:#fff; display:block; } /* ---------- Hero ---------- */ .hero{ position:relative; min-height:100svh; overflow:hidden; background:var(--color-black); } .hero-bg{ position:absolute; inset:0; } .hero-bg-layer{ position:absolute; inset:0; opacity:0; transition:opacity 1.8s ease; background-size:cover; background-repeat:no-repeat; } .hero-bg-layer.is-active{ opacity:1; z-index:1; } .hero-bg-layer.state-a{ background-image:url('assets/hero/state-a-light.webp'); background-position:62% 40%; } .hero-bg-layer.state-b{ background-image:url('assets/hero/state-b-dark.webp'); background-position:70% 62%; } .hero-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none; transition:opacity 1.8s ease; } .hero-scrim.state-a{ opacity:0; background: linear-gradient(100deg, rgba(10,10,11,0.72) 0%, rgba(10,10,11,0.42) 32%, rgba(10,10,11,0.06) 58%, transparent 75%), linear-gradient(0deg, rgba(10,10,11,0.55) 0%, transparent 34%); } .hero-scrim.state-b{ opacity:0; background: linear-gradient(100deg, rgba(10,10,11,0.82) 0%, rgba(10,10,11,0.5) 34%, rgba(10,10,11,0.12) 60%, transparent 78%), linear-gradient(0deg, rgba(10,10,11,0.6) 0%, transparent 34%); } .hero-scrim.state-a.is-active, .hero-scrim.state-b.is-active{ opacity:1; } .hero-inner{ position:relative; z-index:3; min-height:100svh; display:flex; align-items:center; padding:calc(var(--header-h) + var(--space-5)) var(--space-4) var(--space-5); } .hero-content{ max-width:760px; color:#fff; } .hero-jp-lead{ font-family:var(--font-jp); font-weight:700; font-size:clamp(1.4rem,2.2vw,1.9rem); line-height:1.5; margin-bottom:var(--space-2); color:var(--color-orange-soft); } .hero-content h1{ font-size:clamp(3.2rem,8.5vw,6.5rem); line-height:0.98; font-weight:700; text-transform:uppercase; margin-bottom:var(--space-2); } .hero-content h1 .accent{ color:var(--color-orange); } .hero-subtitle{ font-size:1.5rem; font-weight:600; color:rgba(255,255,255,0.85); margin-bottom:var(--space-3); } .hero-actions{ display:flex; gap:var(--space-2); flex-wrap:wrap; } .hero-actions .btn{ font-size:1.15rem; padding:1.1em 2.2em; } /* ---------- Hero rail (right side, hero-only nav) ---------- Two stacked groups — numbers, then labels — echoing the approved reference's rail language, built as real HTML. A number and its label share data-pair and highlight together on hover/focus of either. */ .hero-rail{ position:absolute; z-index:4; right:var(--space-4); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:flex-end; gap:0.55em; color:#fff; } .rail-numbers{ display:flex; flex-direction:column; align-items:flex-end; gap:0.55em; position:relative; } .rail-numbers::before{ content:""; position:absolute; left:-14px; top:2px; bottom:2px; width:1px; background:rgba(255,255,255,0.35); } .rail-tick{ position:absolute; left:-30px; top:2px; width:14px; height:1px; background:rgba(255,255,255,0.55); } .rail-gap{ height:0.6em; } .rail-words{ display:flex; flex-direction:column; align-items:flex-end; gap:0.55em; } .rail-item{ display:block; padding:0.15em 0.3em; margin:-0.15em -0.3em; color:inherit; outline:none; -webkit-tap-highlight-color:transparent; transform:scale(1); transition:transform 200ms ease, color 200ms ease, opacity 200ms ease; } .rail-numbers .rail-item{ font-family:var(--font-display); font-weight:700; font-size:0.95rem; letter-spacing:0.04em; opacity:0.6; } .rail-words .rail-item{ font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; opacity:0.75; } .rail-item.is-hot, .rail-item:focus-visible{ color:var(--color-orange); opacity:1; transform:scale(1.06); } .hero-scroll-cue{ position:absolute; z-index:4; left:var(--space-4); bottom:var(--space-3); display:flex; align-items:center; gap:0.6em; color:rgba(255,255,255,0.7); font-size:0.7rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; } .hero-scroll-cue::before{ content:""; width:1px; height:32px; background:rgba(255,255,255,0.5); } @media (prefers-reduced-motion: reduce){ .hero-bg-layer, .hero-scrim, .btn, .rail-row, .rail-num, .rail-label{ transition:none; } } /* ---------- Restored homepage sections (from prototype-v3, unmodified) ---------- */ section{ padding:var(--space-6) 0; } .hero{ padding:0; } /* keep the generic section padding above from affecting the hero */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .placeholder-tag{ display:inline-block; font-family:var(--font-body); font-size:0.66rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--color-neutral-500); border:1px dashed var(--color-neutral-500); border-radius:2px; padding:0.2em 0.6em; margin-top:0.5em; } .placeholder-tag.on-dark{ color:rgba(255,255,255,0.62); border-color:rgba(255,255,255,0.32); } .eyebrow{ display:flex; align-items:center; gap:0.6em; font-weight:700; font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--color-orange-deep); margin-bottom:var(--space-2); } .eyebrow.on-dark{ color:var(--color-orange-soft); } .three-star{ display:inline-flex; gap:3px; } .three-star span{ width:5px; height:5px; background:currentColor; transform:rotate(45deg); } .section-head{ max-width:680px; margin-bottom:var(--space-4); } .section-head h2{ font-size:clamp(1.9rem,3.4vw,2.8rem); font-weight:700; } .section-head p{ color:var(--color-neutral-500); margin-top:var(--space-1); font-size:1.02rem; } .section-head.on-dark p{ color:rgba(255,255,255,0.62); } .baseline{ height:4px; background:repeating-linear-gradient(90deg, currentColor 0 22px, transparent 22px 34px); opacity:0.9; } .corner-bracket{ position:relative; } .corner-bracket::after{ content:""; position:absolute; top:14px; right:14px; width:32px; height:32px; border-top:2px solid rgba(255,255,255,0.85); border-right:2px solid rgba(255,255,255,0.85); } .corner-bracket::before{ content:""; position:absolute; bottom:14px; left:14px; width:32px; height:32px; border-bottom:2px solid rgba(255,255,255,0.85); border-left:2px solid rgba(255,255,255,0.85); } .accent{ color:var(--color-orange); } /* ---------- Value proposition ---------- Matched to Player Development's own external size: same shared .container (1280) and same shared section padding (var(--space-6), 96px) as #development, plus an explicit content min-height so this section reads as the same "panel class" — not a smaller/cramped sibling. Background hex sampled directly from the reference (#EDE9E1), scoped to this section only (shared token used by locked sections below is left untouched). */ .value-prop{ background:#EDE9E1; position:relative; overflow:hidden; } .value-prop-inner{ position:relative; display:grid; grid-template-columns:0.32fr 0.49fr 0.19fr; gap:28px; align-items:stretch; min-height:504px; } .value-copy{ display:flex; flex-direction:column; justify-content:center; } .value-copy .eyebrow{ margin-bottom:0.8rem; } .value-copy h2{ font-size:36px; line-height:1.02; text-transform:uppercase; } .value-pillars{ display:grid; gap:21px; margin-top:1.3rem; } .value-pillar{ display:flex; flex-direction:column; } .value-pillar .num{ font-family:var(--font-display); font-size:21px; color:var(--color-orange); font-weight:700; line-height:1.3; } .value-pillar h3{ font-size:15px; font-weight:700; line-height:1.25; } .value-pillar p{ color:var(--color-neutral-500); font-size:12.5px; line-height:1.45; margin:0.3em 0 0; } /* 5-photo crossfade — same fixed grid box as before (no height/width change), same principle as the Skill Lab hero slideshow. The 5 source photos vary in aspect ratio (square team photo, 4:3 tournament shots), so object-fit:contain is used instead of cover: it keeps every face, trophy and certificate fully visible with no cropping, and any leftover space just shows the section's own background color — no crop, no letterbox bars, nothing added. */ .value-photo-wrap{ position:relative; overflow:hidden; } .value-photo{ position:absolute; inset:0; z-index:0; } .value-photo-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity 900ms ease; z-index:1; } .value-photo-slide.is-active{ opacity:1; z-index:2; } @media (prefers-reduced-motion: reduce){ .value-photo-slide{ transition:none; } } .value-script{ display:flex; align-items:center; justify-content:center; min-width:0; } /* Cropped directly from the approved reference mockup (transparent cutout) so the script wordmark matches it pixel-for-pixel — not a font recreation. */ .value-script-img{ width:clamp(218px,16.7vw,252px); max-width:none; height:auto; display:block; flex-shrink:0; } /* ---------- Programs — unified scoreboard system (V5) ---------- Master-reference (2882) treatment: the two FINAL photos are large absolutely-positioned background/bleed LAYERS pinned to the section's own edges (not grid columns), full height, object-fit:contain so neither is ever cropped. The content (intro + U12 + U15) is a separate, centered wrapper stacked ABOVE them (z-index:2) sitting directly over the dark space between the two photos. Section height is unchanged (min-height 696px, matching Why Dream Star). */ .programs{ background:var(--color-black); color:#fff; position:relative; overflow:hidden; min-height:696px; padding:0; } .program-bg{ position:absolute; top:0; height:100%; width:40%; object-fit:contain; display:block; z-index:1; pointer-events:none; } .program-bg-left{ left:0; object-position:left center; } /* Right photo uses an aspect-ratio-locked wrapper (matching the source image's true 1672:941 ratio) instead of a height:100% + object-fit:contain box. That box would letterbox vertically, and the amount of letterboxing changes with viewport width (the box height is fixed but the box width scales), so a sibling positioned in fixed pixels or simple percentages drifts out of alignment with the baked-in photo at widths other than the one it was measured at. Sizing the wrapper to the image's real rendered bounds means the wrapper IS the visible photo at every width, so the patch below can be positioned as a percentage of it and stay locked to the same spot on the photo at any viewport width. */ .program-bg-right-wrap{ position:absolute; z-index:1; right:0; top:50%; width:40%; aspect-ratio:1672/941; transform:translateY(-50%); pointer-events:none; } .program-bg-right{ position:absolute; inset:0; width:100%; height:100%; display:block; } /* Removes ONLY the baked-in duplicate "International League — every weekend" line from the live render (a scrim over the render, the source image file itself stays untouched) — everything else on the photo, including the "4 / week" duplicate and the "02" numeral, is left as-is. Position/size are percentages of program-bg-right-wrap (see note above) so this stays aligned with the baked text at any viewport width. */ .program-bg-right-patch{ position:absolute; z-index:1; pointer-events:none; right:59.4%; top:59.5%; width:37.2%; height:4.7%; background:#0a0a0b; } .program-bg-right-patch::before{ content:""; position:absolute; z-index:-1; inset:-14px; background:#0a0a0b; filter:blur(14px); } .program-content{ position:relative; z-index:2; max-width:900px; margin:0 auto; min-height:696px; display:grid; grid-template-columns:221px 1fr 1fr; align-items:center; column-gap:var(--space-4); padding:0 var(--space-3); } .programs-head{ min-width:0; display:flex; flex-direction:column; justify-content:center; } .programs-head h2{ font-size:1.875rem; line-height:1.2; } .programs-head p{ font-size:1.2rem; } .programs-head .eyebrow{ flex-wrap:wrap; row-gap:0.2em; font-size:1.17rem; } .programs-head .three-star span{ width:7.5px; height:7.5px; } .program-col{ position:relative; padding:0 var(--space-4); display:flex; flex-direction:column; justify-content:center; } .program-col#program-u15{ border-left:1px solid rgba(255,255,255,0.14); } /* Large decorative numeral over the LEFT photo, matching the visual weight of the large "02" baked into the right photo (same outline/orange-dark character) — the small ghost 01/02 next to U12/U15 were removed so there is exactly one numbering system: big 01 left, big 02 right. */ .program-big-num{ position:absolute; z-index:1; pointer-events:none; top:50%; transform:translateY(-50%); font-family:var(--font-display); font-weight:700; line-height:1; font-size:clamp(11rem,20vw,18rem); color:transparent; -webkit-text-stroke:2px var(--color-orange); text-stroke:2px var(--color-orange); opacity:0.65; } .program-big-num-left{ left:21%; } .program-tag{ position:relative; z-index:1; font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; color:var(--color-orange-soft); margin-bottom:0.6em; } .program-num{ position:relative; z-index:1; font-family:var(--font-display); font-size:clamp(3.4rem,6vw,5rem); font-weight:700; line-height:0.85; margin-bottom:var(--space-3); } .program-facts{ position:relative; z-index:1; display:grid; gap:0.7em; margin:var(--space-3) 0 var(--space-4); } .program-facts .row{ display:flex; justify-content:space-between; gap:var(--space-2); border-bottom:1px solid rgba(255,255,255,0.14); padding-bottom:0.6em; } .program-facts .row .label{ font-size:0.98rem; color:rgba(255,255,255,0.62); flex:0 0 auto; } .program-facts .row .value{ font-family:var(--font-display); font-weight:600; font-size:0.98rem; letter-spacing:0.01em; text-align:right; white-space:nowrap; } /* "International League — every weekend" needs to wrap (unlike the short "4 / week" values), but only at the space after "—" — non-breaking spaces in the HTML keep "International League" and "every weekend" each intact as a unit, matching the requested 2-line split. */ /* This value's JA text ("不定期の週末練習試合・トレーニングゲーム") is the longest fact value on the card and wraps to 3 lines at the shared 0.98rem size, leaving a 1-character orphan on its own line and making this column taller than its sibling. A small font-size/line-height reduction (scoped to this one value only, text unchanged) brings it back to 2 lines without touching layout or content. */ .program-facts .row .value.value-wrap{ white-space:normal; font-size:0.875rem; line-height:1.5; } .program-trial{ position:relative; z-index:1; display:flex; align-items:baseline; gap:0.5em; margin-top:0.6em; margin-bottom:var(--space-3); } .program-trial .n{ font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--color-orange); } .program-trial .t{ font-size:0.85rem; color:rgba(255,255,255,0.68); } /* Shared min-width/min-height so the U12 and U15 CTAs always match, even though their columns aren't the same width (U15's longer unbreakable fact value forces a wider column than U12's, which wraps). Without this, the JA "U12について見る" label — same length as U15's — has no room to stay on one line in the narrower column and wraps, while U15 stays single-line, making the two buttons look mismatched. */ .program-col .btn{ position:relative; z-index:1; align-self:flex-start; margin-top:0.75em; display:flex; align-items:center; justify-content:center; gap:0.5em; min-width:212px; min-height:58px; white-space:nowrap; box-sizing:border-box; } .cta-arrow{ transition:transform 0.2s ease; } .btn:hover .cta-arrow{ transform:translateX(3px); } .programs-note{ margin-top:var(--space-4); padding:0 0 var(--space-4); font-size:0.85rem; color:rgba(255,255,255,0.48); text-align:center; } /* ---------- Player Development — progression path ---------- Matches the master reference: left copy | center progression (small ring markers on a dashed line, plain numerals below, thin dividers between stages) | photo bleeding in from the right edge. Proportions pixel- sampled from the reference (~24% / ~50% / ~11%, with margins). */ .methodology{ background:var(--color-offwhite); position:relative; overflow:hidden; padding:var(--space-6) 0 0; } .methodology-row{ position:relative; z-index:2; max-width:1440px; margin:0 auto; padding:0 var(--space-3); display:grid; grid-template-columns:0.85fr 1.6fr 0.75fr; gap:var(--space-4); align-items:start; } .methodology-copy{ padding-top:0.4rem; } .methodology-subtitle{ margin-top:0.6em; font-size:0.85rem; font-style:italic; color:var(--color-neutral-500); max-width:30ch; } .progression{ position:relative; display:flex; margin-top:3rem; } .progression-line{ position:absolute; top:7px; left:0; right:0; height:1px; opacity:0.55; background-image:linear-gradient(to right, var(--color-orange) 50%, transparent 0%); background-size:7px 1px; background-repeat:repeat-x; } /* Faint decorative circle brackets at each end, present in the reference. */ .progression::before, .progression::after{ content:""; position:absolute; top:-46px; width:108px; height:108px; border:1px solid var(--color-orange); border-radius:50%; opacity:0.14; pointer-events:none; } .progression::before{ left:-64px; } .progression::after{ right:-64px; } .progress-stage{ position:relative; flex:1 1 0; padding:26px var(--space-3) 0 0; } .progress-stage:not(:last-child){ border-right:1px solid rgba(10,10,11,0.08); } .progress-stage:last-child{ padding-right:0; } .stage-marker{ position:absolute; top:0; left:0; width:13px; height:13px; margin-top:-6px; border-radius:50%; border:3px solid var(--color-orange); background:var(--color-offwhite); box-sizing:border-box; } .stage-num{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:var(--color-orange-deep); } .progress-stage h4{ font-size:1rem; font-weight:700; margin:0.3em 0 0.3em; letter-spacing:-0.01em; } .stage-tbd{ font-size:0.66rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-neutral-500); } /* Full-bleed photo matching the master reference: it ignores the row's max-width/padding and bleeds to the section's own top/right/bottom edges, with a diagonal-cut left edge (clip-path) rather than a straight column boundary. The grid's third track (in .methodology-row) is left empty on purpose, reserving the same horizontal rhythm as before so the copy and progression columns don't reflow, while this sits on top as an independent layer. */ .methodology-photo-bleed{ position:absolute; top:0; right:0; bottom:0; z-index:1; pointer-events:none; width:23%; min-width:280px; clip-path:polygon(46% 0, 100% 0, 100% 100%, 0 100%); } .methodology-photo-bleed img{ width:100%; height:100%; object-fit:cover; display:block; } .methodology-flag{ max-width:1440px; margin:var(--space-5) auto 0; padding:0 300px var(--space-6) var(--space-3); } /* ---------- Game & Competition ---------- */ .competition{ background:var(--color-charcoal); color:#fff; position:relative; overflow:hidden; } .competition-court{ position:absolute; inset:0; opacity:0.14; pointer-events:none; } .competition-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; position:relative; border-top:1px solid rgba(255,255,255,0.14); border-bottom:1px solid rgba(255,255,255,0.14); } .comp-card{ padding:var(--space-4); position:relative; } .comp-card:first-child{ border-right:1px solid rgba(255,255,255,0.14); } .comp-card .tag{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-orange-soft); font-weight:700; margin-bottom:0.4em; } .comp-card .stat{ font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.4rem); font-weight:700; margin-bottom:0.3em; } .comp-card p{ color:rgba(255,255,255,0.7); margin:0; font-size:0.95rem; } /* ---------- Skill Lab ---------- */ .skilllab-lead{ background:var(--color-offwhite); padding:var(--space-2) 0; text-align:center; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-neutral-500); font-weight:700; } .skilllab-lead .mark{ color:var(--color-orange-deep); } .skilllab{ background:linear-gradient(180deg, var(--color-skilllab-blue-dark) 0%, #081217 100%); color:#fff; } .skilllab-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:var(--space-5); align-items:center; } .skilllab-brand{ display:flex; align-items:center; gap:0.8em; margin-bottom:var(--space-3); } /* The badge's own dark ring is close in value to this section's dark background, so a soft radial glow lifts it off the backdrop without altering the logo artwork itself or the section's overall look. */ .skilllab-brand img{ height:92px; width:auto; padding:10px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0) 75%); filter:drop-shadow(0 0 14px rgba(255,255,255,0.10)); } .skilllab h2{ font-size:clamp(1.9rem,3.2vw,2.6rem); font-weight:700; } .skilllab-slogan{ font-family:var(--font-jp); color:var(--color-skilllab-blue); font-weight:700; font-size:1.1rem; margin:var(--space-1) 0 var(--space-2); } .skilllab-offers{ display:grid; gap:var(--space-2); margin:var(--space-3) 0; } .skilllab-offer{ border-left:3px solid var(--color-skilllab-blue); padding-left:var(--space-2); } .skilllab-offer h4{ margin:0 0 0.2em; font-size:1.05rem; font-weight:700; } .skilllab-offer p{ margin:0; color:rgba(255,255,255,0.72); font-size:0.92rem; } .skilllab-photo{ position:relative; border-radius:2px; overflow:hidden; } .skilllab-photo img{ width:100%; height:520px; object-fit:cover; object-position:center 40%; } /* ---------- Coach ---------- */ .coach{ background:var(--color-white); } .coach-grid{ display:grid; grid-template-columns:0.8fr 1fr; gap:var(--space-5); align-items:stretch; } .coach-photo{ position:relative; overflow:hidden; border-radius:2px; } .coach-photo img{ width:100%; height:100%; min-height:540px; object-fit:cover; object-position:top; } .coach-copy{ display:flex; flex-direction:column; justify-content:center; } .coach-copy h3{ font-size:clamp(1.8rem,3vw,2.3rem); font-weight:700; margin-bottom:0.2em; } .coach-copy .role{ margin-bottom:var(--space-2); } .coach-copy p{ max-width:50ch; color:var(--color-charcoal); font-size:1.02rem; } .coach-copy .btn{ margin-top:var(--space-3); align-self:flex-start; } /* ---------- U18 teaser — thin premium marquee strip, no CTA (program unconfirmed) ---------- Pure CSS loop: two identical groups of the same repeated phrase inside a flex track sized to its content (width:max-content), animated from translateX(0) to translateX(-50%) — exactly one group's width — so the second group slides in seamlessly where the first left off. No JS. */ .u18-teaser{ background:var(--color-charcoal); border-top:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(255,255,255,0.08); padding:20px 0; overflow:hidden; } .u18-teaser-track{ overflow:hidden; width:100%; } .u18-teaser-marquee{ display:flex; width:max-content; animation:u18Marquee 40s linear infinite; } .u18-teaser-group{ display:flex; align-items:center; flex-shrink:0; } .u18-teaser-item{ display:inline-flex; align-items:center; gap:0.6em; white-space:nowrap; padding:0 var(--space-4); font-size:0.92rem; letter-spacing:0.04em; text-transform:uppercase; color:rgba(255,255,255,0.62); font-weight:600; } .u18-teaser-item .u18-teaser-num{ font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--color-orange); text-transform:none; letter-spacing:0.02em; } .u18-teaser-item .u18-teaser-dot{ color:var(--color-orange); } @keyframes u18Marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .u18-teaser-marquee{ animation:none; } } @media (max-width:680px){ .u18-teaser{ padding:12px 0; } .u18-teaser-item{ font-size:0.78rem; padding:0 var(--space-3); } .u18-teaser-item .u18-teaser-num{ font-size:1.05rem; } } /* ---------- Training in Action — asymmetric collage ---------- */ .training{ background:var(--color-offwhite); } .collage{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:140px; gap:var(--space-2); } .collage-item{ position:relative; overflow:hidden; border-radius:2px; } .collage-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .collage-item:hover img{ transform:scale(1.04); } .collage-item.a{ grid-column:span 4; grid-row:span 3; } .collage-item.b{ grid-column:span 2; grid-row:span 2; } .collage-item.c{ grid-column:span 2; grid-row:span 1; } .collage-caption{ position:absolute; left:0; right:0; bottom:0; padding:0.6em 0.8em; background:linear-gradient(0deg, rgba(0,0,0,0.65), transparent); color:#fff; font-size:0.74rem; letter-spacing:0.03em; z-index:2; } .collage-item.is-placeholder{ display:flex; align-items:center; justify-content:center; text-align:center; padding:var(--space-2); border:1px dashed var(--color-neutral-500); background:repeating-linear-gradient(135deg, transparent, transparent 8px, rgba(138,133,124,0.08) 8px, rgba(138,133,124,0.08) 16px); } /* Big collage photo (item a) is a 2-photo crossfade — same stacked-slide pattern as the homepage "Why Dream Star" photo. object-fit:contain (not the collage's default cover) because these are full-team group photos where cropping risks cutting heads/feet; the box keeps its existing size/position, any letterboxing just reveals the section's own off-white background behind it. */ .collage-item.a .collage-a-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity 900ms ease; z-index:0; } .collage-item.a .collage-a-slide.is-active{ opacity:1; z-index:1; } /* Combined logo image (item c) — shown as delivered, not cropped/stretched. */ .collage-item.c img{ object-fit:contain; } .training-footer{ margin-top:var(--space-3); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-2); } .training-footer a{ font-weight:700; font-size:0.92rem; border-bottom:2px solid var(--color-orange); } /* ---------- Trial CTA ---------- */ .trial-cta{ position:relative; overflow:hidden; background:linear-gradient(135deg, var(--color-orange-bright) 0%, var(--color-orange) 55%, var(--color-orange-deep) 100%); color:var(--color-black); text-align:center; } .trial-paint{ position:absolute; inset:0; opacity:0.14; pointer-events:none; } .trial-cta .container{ position:relative; } .trial-cta h2{ font-size:clamp(2.1rem,4.4vw,3.2rem); margin-bottom:0.3em; text-transform:uppercase; } .trial-subline{ font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:rgba(10,10,11,0.75); margin:0 0 var(--space-4); } .trial-cta .eyebrow{ color:rgba(10,10,11,0.7); justify-content:center; } .trial-offers{ display:flex; justify-content:center; gap:var(--space-4); flex-wrap:wrap; margin:var(--space-3) 0 var(--space-4); } .trial-offer{ max-width:250px; } .trial-offer .n{ font-family:var(--font-display); font-size:3rem; font-weight:700; color:var(--color-black); } .trial-offer p{ margin:0.3em 0 0; font-size:0.9rem; color:rgba(10,10,11,0.75); font-weight:600; } .trial-offer.tbd .n{ color:rgba(10,10,11,0.45); font-size:1.4rem; } .trial-offer.tbd p{ color:rgba(10,10,11,0.6); } /* ---------- Footer ---------- */ .site-footer{ background:var(--color-charcoal); color:rgba(255,255,255,0.75); padding:var(--space-5) 0 var(--space-3); } .footer-grid{ display:grid; grid-template-columns:1.1fr 0.7fr 0.7fr 0.9fr 0.7fr; gap:var(--space-4); padding-bottom:var(--space-4); border-bottom:1px solid rgba(255,255,255,0.12); } .footer-brand{ display:flex; gap:0.7em; align-items:center; margin-bottom:var(--space-2); } .footer-brand img{ height:52px; width:auto; } .footer-col h5{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,0.5); margin:0 0 var(--space-2); } .footer-col ul{ display:grid; gap:0.6em; } .footer-col a:hover{ color:var(--color-orange-soft); } .footer-note{ font-size:0.85rem; } /* Social icon row — real links, inline SVG (no icon library needed for 4 icons). Padding + negative margin gives mobile a ~44px touch target without changing the visual icon size or the 16px gap. */ .footer-social{ display:flex; align-items:center; gap:16px; } .footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:11px; margin:-11px; box-sizing:border-box; color:rgba(255,255,255,0.65); transition:color 200ms ease, transform 200ms ease; } .footer-social a:hover{ color:var(--color-orange); transform:scale(1.08); } .footer-social svg{ width:100%; height:100%; display:block; } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:var(--space-3); font-size:0.78rem; color:rgba(255,255,255,0.45); flex-wrap:wrap; gap:var(--space-1); } .footer-credit{ text-transform:uppercase; font-size:10.5px; letter-spacing:0.1em; color:rgba(255,255,255,0.65); } /* #00D4FF is AriaPolarix Labs' own primary accent color (verified against their site's buttons/links/focus-ring at ariapolarix.com), reused here exactly rather than approximated. */ .aria-credit-link{ display:inline-block; font-weight:700; color:rgba(255,255,255,0.85); cursor:pointer; transition:color 200ms ease, transform 200ms ease; transform-origin:center; } .aria-credit-link:hover{ color:#00D4FF; transform:scale(1.03); } .aria-credit-link:focus-visible{ color:#00D4FF; outline:1px solid #00D4FF; outline-offset:2px; } /* ---------- Motion safety (scroll-reveal for restored sections) ---------- */ .reveal{ opacity:1; transform:none; } .reveal.will-animate{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; } .reveal.will-animate.is-visible{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .reveal.will-animate{ opacity:1; transform:none; transition:none; } .collage-item img{ transition:none; } } /* ========================================================================== Mobile ========================================================================== */ @media (max-width:900px){ .hero-bg-layer.state-a{ background-position:70% 30%; } .hero-bg-layer.state-b{ background-position:35% 65%; } .hero-subtitle{ font-size:1.2rem; } .hero-rail{ right:var(--space-3); gap:0.6em; } } @media (max-width:680px){ .brand img{ height:44px; } .brand-type strong{ font-size:1.14rem; } .brand-type span{ display:none; } .footer-brand img{ height:42px; } .header-cta{ display:none; } .nav-toggle{ display:flex; } .main-nav{ /* `.site-header` has backdrop-filter, which makes it the containing block for this fixed-position panel — so `bottom:0` resolves against the header's own (short) box instead of the viewport, collapsing the background to a sliver. An explicit height tied to the viewport sidesteps that and guarantees full opaque coverage behind every nav item, on any page background. */ position:fixed; top:var(--header-h); left:0; right:0; height:calc(100vh - var(--header-h)); background:rgba(10,10,11,0.97); flex-direction:column; align-items:stretch; padding:var(--space-3); transform:translateX(100%); transition:transform 300ms ease; z-index:99; justify-content:flex-start; } .main-nav.is-open{ transform:translateX(0); } .main-nav ul{ flex-direction:column; gap:var(--space-3); font-size:1.2rem; } .main-nav .lang-toggle{ margin-top:var(--space-3); align-self:flex-start; } .main-nav .header-cta{ display:block; margin-top:var(--space-3); } .main-nav .header-cta .btn{ width:100%; justify-content:center; padding:0.9em; font-size:0.95rem; } .hero-inner{ padding:calc(var(--header-h) + var(--space-3)) var(--space-3) var(--space-4); align-items:flex-end; } .hero-content{ max-width:100%; } .hero-content h1{ font-size:clamp(2.1rem,9vw,2.6rem); } .hero-actions{ flex-direction:column; align-items:stretch; } .hero-actions .btn{ justify-content:center; } .hero-rail{ top:auto; bottom:calc(var(--space-4) + 92px); transform:none; right:var(--space-3); gap:0.4em; } .rail-words{ display:none; } .rail-numbers::before, .rail-tick{ display:none; } .hero-scroll-cue{ display:none; } } /* ========================================================================== Restored homepage sections — mobile (from prototype-v3, unmodified) Separate blocks (rather than merging into the header/hero mobile rules above) so the hero/header mobile behavior stays exactly as-is. ========================================================================== */ @media (max-width:980px){ .skilllab-grid,.coach-grid{ grid-template-columns:1fr; } .value-prop-inner{ grid-template-columns:1fr; min-height:0; } .value-copy{ padding:0 0 var(--space-4); } .value-photo-wrap{ order:-1; margin-bottom:var(--space-3); min-height:300px; } .value-script{ display:none; } .skilllab-photo img{ height:340px; } .coach-photo img{ min-height:340px; } .programs{ min-height:0; } .program-bg{ display:none; } .program-bg-right-wrap{ display:none; } .program-content{ display:flex; flex-direction:column; align-items:stretch; max-width:none; min-height:0; padding:var(--space-4) var(--space-3); } .programs-head{ padding:0 0 var(--space-4); } .program-col{ width:auto; flex:0 0 auto; padding:0 0 var(--space-4) !important; } .program-col#program-u15{ border-left:none; border-top:1px solid rgba(255,255,255,0.14); padding-top:var(--space-4) !important; } .program-big-num{ display:none; } .competition-grid{ grid-template-columns:1fr; } .comp-card:first-child{ border-right:none; border-bottom:1px solid rgba(255,255,255,0.14); } .methodology-row{ grid-template-columns:1fr; } .methodology-photo-bleed{ display:none; } .methodology-flag{ padding-right:var(--space-3); } .progression{ flex-wrap:wrap; row-gap:var(--space-5); margin-top:var(--space-5); } .progression::before,.progression::after{ display:none; } .progress-stage{ flex:0 0 46%; padding:0 !important; border-right:none !important; } .stage-marker{ position:static; margin:0 0 0.5rem; display:block; } .progression-line{ display:none; } .collage{ grid-template-columns:repeat(4,1fr); grid-auto-rows:120px; } .collage-item.a{ grid-column:span 4; grid-row:span 2; } .collage-item.b{ grid-column:span 2; grid-row:span 2; } .collage-item.c{ grid-column:span 2; grid-row:span 1; } .footer-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:680px){ .program-num{ font-size:clamp(3.4rem,20vw,4.5rem); } .collage{ grid-template-columns:1fr 1fr; grid-auto-rows:150px; } .collage-item.a{ grid-column:span 2; grid-row:span 2; } .collage-item.b{ grid-column:1; grid-row:span 1; } .collage-item.c{ grid-column:2; grid-row:span 1; } .footer-grid{ grid-template-columns:1fr; gap:var(--space-3); } .trial-offers{ gap:var(--space-3); } .mobile-sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--color-black); padding:0.8em var(--space-3); display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); border-top:1px solid rgba(255,255,255,0.1); } .mobile-sticky-cta span{ color:#fff; font-size:0.82rem; font-weight:700; } .mobile-sticky-cta .btn{ padding:0.6em 1.2em; font-size:0.85rem; } body{ padding-bottom:64px; } } /* ========================================================================== Inner pages — U12 (full), shared skeleton for U15/Skill Lab/Coach/ Training/Contact. New classes only — nothing here overrides or is overridden by Home's rules above it. ========================================================================== */ /* ---------- U12 hero ---------- */ .program-hero{ background:var(--color-charcoal); color:#fff; padding:calc(var(--header-h) + var(--space-5)) 0 var(--space-6); } .program-hero-inner{ display:grid; grid-template-columns:1fr 0.82fr; gap:var(--space-5); align-items:center; } .program-hero-copy{ max-width:560px; } .program-hero-num{ font-family:var(--font-display); font-weight:700; line-height:0.85; font-size:clamp(4rem,8vw,6.5rem); color:transparent; -webkit-text-stroke:2px var(--color-orange); text-stroke:2px var(--color-orange); margin-bottom:0.15em; opacity:0.9; } .program-hero-h1{ font-size:clamp(2rem,3.6vw,2.85rem); color:#fff; line-height:1.2; margin-bottom:0.25em; } .program-hero-en{ font-family:var(--font-body); font-size:0.92rem; font-weight:700; color:var(--color-orange-soft); text-transform:uppercase; letter-spacing:0.06em; margin:0 0 1em; } .program-hero-desc{ color:rgba(255,255,255,0.72); font-size:1rem; line-height:1.65; margin:0 0 var(--space-3); max-width:48ch; } .program-trial-badge{ display:flex; align-items:baseline; gap:0.5em; margin-bottom:var(--space-3); } .program-trial-badge .n{ font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--color-orange); } .program-trial-badge .t{ font-size:0.9rem; color:rgba(255,255,255,0.7); font-weight:600; } .program-hero-media{ position:relative; } /* Media slot is intentionally styled (subtle gradient, border, corner tag) rather than a blank gray box, so the page reads as finished. Swapping in the real photo later is a straight img src replacement — the aspect ratio and surrounding layout are already final. */ .media-slot{ position:relative; width:100%; aspect-ratio:3/4; border-radius:4px; background:linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.12); display:flex; align-items:flex-end; justify-content:flex-end; padding:var(--space-2); overflow:hidden; } /* When a real photo is dropped in later (an img as the slot's only other child), it fills the slot and crops to it — src replacement only, no layout change needed. */ .media-slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .media-slot.wide{ aspect-ratio:16/9; } .media-slot.landscape{ aspect-ratio:4/3; } .media-slot.portrait{ aspect-ratio:3/4; } .media-slot-tag{ display:inline-block; font-family:var(--font-body); font-size:0.64rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.42); border:1px dashed rgba(255,255,255,0.3); border-radius:2px; padding:0.25em 0.6em; } /* Light-background variant — the default media-slot is a barely-visible white-on-dark treatment, which disappears entirely on an off-white section background. Used wherever a media slot sits on --color-offwhite instead of a dark hero. */ .media-slot.on-light{ background:linear-gradient(160deg, rgba(10,10,11,0.05), rgba(10,10,11,0.02)); border-color:rgba(10,10,11,0.12); } .media-slot.on-light .media-slot-tag{ color:rgba(10,10,11,0.4); border-color:rgba(10,10,11,0.28); } /* ---------- Quick facts ---------- */ .quick-facts{ background:var(--color-offwhite); padding:var(--space-5) 0; } .quick-facts-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4) var(--space-3); margin-top:var(--space-3); } .qf-item{ display:flex; flex-direction:column; gap:0.35em; padding-bottom:var(--space-2); border-bottom:1px solid rgba(10,10,11,0.12); } .qf-label{ font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-neutral-500); } .qf-value{ font-family:var(--font-display); font-size:1.25rem; font-weight:700; color:var(--color-black); line-height:1.2; } /* ---------- Program focus (6-stage track) ---------- */ .focus-section{ background:var(--color-black); color:#fff; padding:var(--space-6) 0; } .focus-section .section-head{ max-width:760px; margin-bottom:0; } .focus-section .section-head h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); margin:0.3em 0 0.7em; } .focus-track{ position:relative; display:flex; flex-wrap:wrap; row-gap:var(--space-4); margin-top:var(--space-5); } .focus-line{ position:absolute; top:6px; left:0; right:0; height:1px; opacity:0.4; background-image:linear-gradient(to right, var(--color-orange) 50%, transparent 0%); background-size:7px 1px; background-repeat:repeat-x; } .focus-stage{ position:relative; flex:1 1 16%; min-width:150px; padding:26px var(--space-2) 0 0; } .focus-marker{ position:absolute; top:0; left:0; width:13px; height:13px; margin-top:-6px; border-radius:50%; border:3px solid var(--color-orange); background:var(--color-black); box-sizing:border-box; } .focus-stage h4{ font-size:0.96rem; font-weight:700; margin:0 0 0.35em; letter-spacing:-0.01em; } /* U15's Program Focus adds a working "advanced vocabulary" line per category (still unconfirmed — see the section's placeholder-tag), so its stages need a bit more width to keep that line from wrapping too aggressively. */ .focus-track-detailed .focus-stage{ flex-basis:16%; min-width:168px; } .focus-detail{ font-size:0.76rem; color:rgba(255,255,255,0.55); line-height:1.42; margin:0 0 0.5em; } /* ---------- U15 competition (stronger visual weight than U12's note) ---------- New, independently-scoped classes — deliberately NOT reusing Home's .competition/.comp-card selectors, so nothing here can ever affect Home even if this section's styling changes later. */ .u15-league{ background:var(--color-black); color:#fff; padding:var(--space-6) 0 0; } .u15-league .container{ padding-bottom:var(--space-5); } .u15-league h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); margin:0.3em 0 0.5em; } .u15-league-jp{ font-size:1rem; color:rgba(255,255,255,0.6); margin:0; } .u15-league-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid rgba(255,255,255,0.14); } .u15-league-card{ padding:var(--space-5) var(--space-3); position:relative; } .u15-league-card:first-child{ border-right:1px solid rgba(255,255,255,0.14); } .u15-league-card .tag{ font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-orange-soft); font-weight:700; margin-bottom:0.5em; } .u15-league-card .stat{ font-family:var(--font-display); font-size:clamp(2rem,3.6vw,2.8rem); font-weight:700; line-height:1.05; margin-bottom:0.4em; } .u15-league-card p{ color:rgba(255,255,255,0.68); margin:0; font-size:0.95rem; max-width:38ch; } /* ---------- Competition note ---------- */ .comp-note-section{ background:var(--color-offwhite); padding:var(--space-6) 0; } .comp-note-inner{ max-width:760px; } .comp-note-inner h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); margin:0.3em 0 0.5em; } .comp-note-jp{ font-size:1rem; color:var(--color-neutral-500); margin:0 0 0.8em; } .comp-note-inner > p:last-child{ font-size:1.02rem; color:rgba(10,10,11,0.75); line-height:1.6; } /* ---------- Location ---------- */ .location-section{ background:var(--color-charcoal); padding:var(--space-6) 0; } .location-inner{ max-width:760px; } .location-inner h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); margin:0.3em 0 0.5em; } .location-jp{ font-size:1rem; color:rgba(255,255,255,0.6); margin:0 0 0.8em; } .location-desc{ font-size:1.02rem; color:rgba(255,255,255,0.75); line-height:1.6; } /* ---------- Skeleton pages (U15 / Skill Lab / Coach / Training / Contact) ---------- */ .skeleton-hero{ background:var(--color-charcoal); color:#fff; padding:calc(var(--header-h) + var(--space-6)) 0 var(--space-6); min-height:60vh; display:flex; align-items:center; } .skeleton-hero h1{ font-size:clamp(2.2rem,5vw,3.4rem); margin:0.2em 0 0.3em; } .skeleton-hero p{ color:rgba(255,255,255,0.6); font-size:1rem; max-width:52ch; } /* ========================================================================== Stankovic Skill Lab page — new, independently-scoped .sl-* classes only. Uses the existing skilllab-blue/navy tokens (already in :root, already used by Home's own Skill Lab section) as this page's accent instead of Dream Star orange, without touching or reusing Home's .skilllab rules. ========================================================================== */ .sl-hero{ background:linear-gradient(180deg, var(--color-skilllab-blue-dark) 0%, #081217 100%); color:#fff; padding:calc(var(--header-h) + var(--space-5)) 0 var(--space-6); } .sl-hero-inner{ display:grid; grid-template-columns:1fr 0.82fr; gap:var(--space-5); align-items:center; } .sl-hero-copy{ max-width:580px; } /* Same soft radial glow as .skilllab-brand img on the Home page — this hero sits on the same dark gradient, so the badge's dark ring needs the same lift to read clearly. */ .sl-hero-logo{ height:104px; width:auto; padding:10px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0) 75%); filter:drop-shadow(0 0 14px rgba(255,255,255,0.10)); margin-bottom:0.4em; } .sl-hero-h1{ font-size:clamp(1.9rem,3.4vw,2.7rem); color:#fff; line-height:1.25; margin-bottom:0.25em; } .sl-hero-en{ font-family:var(--font-body); font-size:0.92rem; font-weight:700; color:var(--color-skilllab-blue); text-transform:uppercase; letter-spacing:0.06em; margin:0 0 1em; } .sl-hero-desc{ color:rgba(255,255,255,0.72); font-size:1rem; line-height:1.65; margin:0 0 var(--space-3); max-width:52ch; } /* Hero photo slideshow — 3 authentic training photos, simple autoplay crossfade (no arrows/dots), same principle as the Home hero and Coach Playing Career slideshow. Scoped to .sl-hero-slideshow so the shared .media-slot img rule stays untouched. The 3 source photos are portrait/near-square, not landscape — cropping them into the old 4:3 box cut off faces, hands and the ball. A taller 4:5 box + object-fit:contain shows the full original frame on all 3 (no crop, no stretch); any leftover space is filled by this slot's own existing dark gradient background, not a new decoration. */ .media-slot.landscape.sl-hero-slideshow{ aspect-ratio:4/5; } .media-slot.sl-hero-slideshow .sl-hero-slide{ object-fit:contain; opacity:0; transition:opacity 900ms ease; z-index:1; } .media-slot.sl-hero-slideshow .sl-hero-slide.is-active{ opacity:1; z-index:2; } @media (prefers-reduced-motion: reduce){ .media-slot.sl-hero-slideshow .sl-hero-slide{ transition:none; } } .sl-hero-actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); } .sl-instagram-link{ display:inline-flex; align-items:center; gap:0.5em; margin-top:var(--space-3); font-size:0.85rem; font-weight:600; color:rgba(255,255,255,0.65); transition:color 200ms ease; } .sl-instagram-link svg{ width:18px; height:18px; flex:none; } .sl-instagram-link:hover{ color:var(--color-skilllab-blue); } /* Coach Connection photo slideshow — same crossfade principle, reusing the existing .media-slot frame/aspect-ratio as-is. Each photo gets its own object-position so the 3:4 crop keeps its real subject in frame. */ .media-slot.sl-coach-slideshow .sl-coach-slide{ opacity:0; transition:opacity 900ms ease; z-index:1; } .media-slot.sl-coach-slideshow .sl-coach-slide.is-active{ opacity:1; z-index:2; } .sl-coach-slide:nth-of-type(2){ object-position:25% center; } .sl-coach-slide:nth-of-type(3){ object-position:40% center; } @media (prefers-reduced-motion: reduce){ .media-slot.sl-coach-slideshow .sl-coach-slide{ transition:none; } } /* Slogan is explicitly NOT final brand copy — kept small, off to the side of the hero, with an always-visible pending-approval tag right next to it, rather than as a central hero statement. */ .sl-slogan-bar{ background:#081217; padding:var(--space-2) var(--space-3); text-align:center; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-2); } .sl-slogan{ font-family:var(--font-jp); color:var(--color-skilllab-blue); font-weight:700; font-size:0.98rem; } .sl-options{ background:var(--color-offwhite); padding:var(--space-6) 0; } .sl-options h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); margin:0.3em 0 0.5em; } .sl-options-lead{ font-size:1.02rem; color:rgba(10,10,11,0.65); margin:0; max-width:52ch; } /* Two training formats presented as one editorial choice, split by a single thin rule (grid's middle 1px column) rather than boxed cards. */ .sl-options-grid{ display:grid; grid-template-columns:1fr 1px 1fr; gap:var(--space-5); margin-top:var(--space-5); align-items:start; } .sl-options-divider{ background:rgba(10,10,11,0.12); align-self:stretch; } .sl-option-num{ display:block; font-family:var(--font-display); font-size:clamp(2.4rem,4.4vw,3.2rem); font-weight:700; line-height:1; color:var(--color-skilllab-blue-deep); margin-bottom:0.25em; } .sl-option h3{ font-size:1.4rem; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; margin:0 0 0.5em; } .sl-option > p{ color:rgba(10,10,11,0.7); font-size:0.98rem; line-height:1.55; margin:0 0 var(--space-2); max-width:42ch; } .sl-option-trial{ display:flex; align-items:baseline; gap:0.5em; margin:var(--space-2) 0 var(--space-3); padding-top:var(--space-2); border-top:1px solid rgba(10,10,11,0.1); } .sl-option-trial .n{ font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:var(--color-skilllab-blue-deep); } .sl-option-trial .t{ font-size:0.85rem; color:var(--color-neutral-500); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; } .sl-option-note{ font-size:0.85rem; color:var(--color-neutral-500); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; margin:var(--space-2) 0 var(--space-3); padding-top:var(--space-2); border-top:1px solid rgba(10,10,11,0.1); } .btn-outline-skilllab{ background:transparent; color:var(--color-skilllab-blue-deep); border-color:var(--color-skilllab-blue); } .btn-outline-skilllab:hover{ background:rgba(42,166,224,0.08); border-color:var(--color-skilllab-blue-deep); } .sl-focus-confirmed{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); margin-top:var(--space-4); } .sl-focus-point{ position:relative; padding-left:1.1em; font-size:0.92rem; font-weight:600; color:rgba(255,255,255,0.82); } .sl-focus-point::before{ content:""; position:absolute; left:0; top:0.5em; width:6px; height:6px; border-radius:50%; background:var(--color-skilllab-blue); } .focus-track.sl-accent .focus-marker{ border-color:var(--color-skilllab-blue); } .focus-track.sl-accent .focus-line{ background-image:linear-gradient(to right, var(--color-skilllab-blue) 50%, transparent 0%); } .sl-coach{ background:var(--color-offwhite); padding:var(--space-6) 0; } .sl-coach-inner{ display:grid; grid-template-columns:1fr 0.82fr; gap:var(--space-5); align-items:center; } .sl-coach-copy{ max-width:520px; } .sl-coach-copy h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); margin:0.3em 0 0.7em; } .sl-coach-copy p{ font-size:1rem; color:rgba(10,10,11,0.75); line-height:1.6; margin:0 0 0.8em; max-width:52ch; } .sl-coach-facts{ display:grid; gap:0.6em; margin:0 0 var(--space-3); } .sl-coach-facts li{ position:relative; padding-left:1.2em; font-size:0.96rem; color:rgba(10,10,11,0.75); line-height:1.4; } .sl-coach-facts li::before{ content:""; position:absolute; left:0; top:0.5em; width:6px; height:6px; border-radius:50%; background:var(--color-skilllab-blue-deep); } .sl-trial{ background:linear-gradient(135deg, var(--color-skilllab-blue) 0%, var(--color-skilllab-blue-deep) 55%, var(--color-skilllab-blue-dark) 100%); color:#fff; text-align:center; padding:var(--space-6) 0; } .sl-trial h2{ font-size:clamp(1.7rem,3.6vw,2.6rem); margin:0.4em 0 0.2em; line-height:1.3; } .sl-trial-sub{ font-family:var(--font-body); font-weight:700; font-size:1rem; color:rgba(255,255,255,0.8); margin:0 0 var(--space-4); } .sl-trial-offers{ display:flex; justify-content:center; gap:var(--space-4); flex-wrap:wrap; margin:0 0 var(--space-4); } .sl-trial-offer{ max-width:250px; } .sl-trial-offer .label{ display:block; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; color:rgba(255,255,255,0.68); margin-bottom:0.3em; } .sl-trial-offer .n{ font-family:var(--font-display); font-size:2.4rem; font-weight:700; color:#fff; } .sl-trial-offer p{ margin:0.3em 0 0; font-size:0.9rem; color:rgba(255,255,255,0.82); font-weight:600; } @media (max-width:980px){ .sl-hero-inner{ grid-template-columns:1fr; } .sl-hero-inner .program-hero-media{ order:-1; width:100%; max-width:340px; margin:0 auto var(--space-4); } .sl-coach-inner{ grid-template-columns:1fr; } .sl-coach-inner .program-hero-media{ order:-1; width:100%; max-width:340px; margin:0 auto var(--space-4); } .sl-coach-copy{ max-width:none; } .sl-options-grid{ grid-template-columns:1fr; gap:0; } .sl-options-divider{ width:100%; height:1px; margin:var(--space-4) 0; } } @media (max-width:680px){ .sl-slogan-bar{ flex-direction:column; gap:0.5em; } } /* ========================================================================== Coach Stefan page — new, independently-scoped .coach- and .ce- classes only. No sub-brand accent (Coach is Dream Star's own page, not a sub-offer) — orange stays the accent, same as Home/U12/U15. ========================================================================== */ .coach-hero{ background:var(--color-charcoal); color:#fff; padding:calc(var(--header-h) + var(--space-5)) 0 var(--space-6); } .coach-hero-inner{ display:grid; grid-template-columns:1fr 0.82fr; gap:var(--space-5); align-items:center; } .coach-hero-copy{ max-width:580px; } .coach-hero-h1{ font-size:clamp(1.9rem,3.6vw,2.85rem); color:#fff; line-height:1.25; margin-bottom:0.25em; } .coach-hero-en{ font-family:var(--font-body); font-size:0.92rem; font-weight:700; color:var(--color-orange-soft); text-transform:uppercase; letter-spacing:0.06em; margin:0 0 1em; } .coach-hero-desc{ color:rgba(255,255,255,0.72); font-size:1rem; line-height:1.65; margin:0; max-width:52ch; } .coach-profile{ background:var(--color-offwhite); padding:var(--space-6) 0; } .coach-profile-inner{ display:grid; grid-template-columns:1fr 0.82fr; gap:var(--space-5); align-items:center; } .coach-profile-copy{ max-width:560px; } .coach-profile-copy h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); margin:0.3em 0 0.6em; } .coach-profile-copy p{ font-size:1rem; color:rgba(10,10,11,0.75); line-height:1.6; margin:0 0 0.8em; max-width:52ch; } /* Coaching Profile media slot: a single editorial photo mosaic (the six supplied photos, real clickable /