/* ========================================================================== AWARD ELEVATION — warm-gold editorial finish layer -------------------------------------------------------------------------- Loads AFTER style.css (which ends with the "BOARDROOM FINISH" !important layer). This file is ADDITIVE ONLY: it never removes/renames a class, id or handler. It refines the EXISTING aesthetic — warm honey gold (#F5A623) on an ivory canvas (#F8F5EF) with charcoal ink (#1C1A17) — to genuine award craft. Gold stays the hero, deployed as a precise accent, never a flood. One quiet desaturated teal joins as a single supporting ambient accent; the existing lavender is demoted to a near-invisible cool counterweight. Cascade: uses !important wherever it must beat the BOARDROOM layer. Motion: every non-essential animation is gated by prefers-reduced-motion. SECTIONS 0. Tokens — type scale, easing, elevated shadow & grain vocabulary 1. Typography & OpenType (tabular figures, optical sizing, small-caps) 2. Color, atmosphere, depth (glow-blobs, mesh canvas, warm surfaces) 3. Section rhythm, editorial mastheads & soft seams 4. Motion — reveal states + gold micro-interactions 5. Finish — scrollbar, focus rings, badges, lullaby, scroll-progress 6. Responsive refinements (desktop + 768 + 480) 7. Reduced-motion master gate ========================================================================== */ /* ========================================================================== 0. ELEVATION TOKENS Reuse existing names (--brand-gold, --board-shadow…) and add one cohesive set: ONE type scale, ONE easing vocabulary, ONE elevated-shadow language. ========================================================================== */ :root { /* — Supporting ambient accent (single, calm, medical) — */ --ae-teal: 45, 142, 130; /* desaturated teal — the one new accent */ --ae-gold: 245, 166, 35; /* brand honey as rgb triplet for alpha */ --ae-deep: 138, 90, 18; /* brand-ink honey for warm shadows */ /* — Motion: three intentional curves authored by one hand — */ --ae-ease-entrance: cubic-bezier(0.22, 0.85, 0.24, 1); /* confident decel */ --ae-ease-spring: cubic-bezier(0.34, 1.30, 0.46, 1); /* soft hover lift */ --ae-ease-press: cubic-bezier(0.40, 0.00, 0.20, 1); /* crisp press */ /* — Fluid vertical rhythm (content-aware breathing) — */ --ae-rhythm-xl: clamp(96px, 11vw, 168px); /* major narrative open */ --ae-rhythm-lg: clamp(80px, 8.5vw, 132px); /* default section */ --ae-rhythm-md: clamp(64px, 6.5vw, 104px); /* dense / utility */ --ae-seam: clamp(40px, 6vw, 88px); /* soft seam feather height */ /* — Elevated warm-tinted, lit-from-above shadow language — */ --ae-edge-hi: inset 0 1px 0 rgba(255, 255, 255, 0.9); /* top edge light */ --ae-shadow-1: var(--ae-edge-hi), 0 1px 2px rgba(40, 30, 16, 0.04), 0 8px 18px rgba(40, 30, 16, 0.05), 0 26px 48px rgba(40, 30, 16, 0.055); --ae-shadow-2: var(--ae-edge-hi), 0 10px 26px rgba(40, 30, 16, 0.05), 0 34px 64px rgba(40, 30, 16, 0.07); --ae-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 14px 30px rgba(40, 30, 16, 0.07), 0 40px 70px rgba(40, 30, 16, 0.085), 0 24px 60px rgba(var(--ae-gold), 0.10); /* — Analog fine grain for the one large saturated gold field — */ --ae-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ========================================================================== 1. TYPOGRAPHY & THE MISSING OPENTYPE LAYER Preserve Outfit (display) + DM Sans (body). Elevate via opsz, tabular figures, tuned tracking/leading, balanced wrapping and small-caps eyebrows. NO new hero face — Outfit 900 at negative tracking is already the identity. ========================================================================== */ body { font-optical-sizing: auto !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility !important; font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "cv05" 1, "ss01" 1 !important; } /* Every numeric / data glyph → tabular lining figures so columns align like a medical instrument readout (7/24, 61 cm, %78, percentiles…). */ .stat-number, .hero-stats .stat-number, .widget-val, .curve-lbl, .ai-dash-status, .growth-stats-mini, .growth-stats-mini strong, #growth-stat-height, #growth-stat-weight, .sim-stat-pill, .sim-quick-stats, .hero-proof-row span, .lullaby-status { font-variant-numeric: tabular-nums lining-nums !important; font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1 !important; } /* — Hero headline: editorial leading, optical tracking, balanced wrap. Scoped to .hero-content h1 so the curtain .intro-title is untouched. — */ .hero-content h1 { line-height: 1.0 !important; letter-spacing: -0.047em !important; text-wrap: balance !important; font-feature-settings: "kern" 1, "liga" 1, "ss01" 1 !important; -webkit-font-smoothing: antialiased !important; } /* A single gilded keyword (wrapped by JS as .ae-gild) — gold as one precise editorial mark, not a wash. Also styles any author-added //. */ .hero-content h1 .ae-gild, .hero-content h1 b, .hero-content h1 strong, .hero-content h1 em { color: var(--brand-deep) !important; -webkit-text-fill-color: var(--brand-deep) !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: -0.048em !important; } .hero-lead { text-wrap: pretty !important; letter-spacing: 0.002em !important; -webkit-font-smoothing: antialiased !important; } /* — Eyebrows → true gold small-caps. uppercase+tracking is load-bearing; smcp is a bonus where the font ships it. — */ .badge-hero, .phone-eyebrow, .sim-greeting-eyebrow { text-transform: uppercase !important; letter-spacing: 0.14em !important; font-weight: 700 !important; font-size: 0.7rem !important; line-height: 1.1 !important; font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1 !important; } .badge-hero { color: var(--brand-ink) !important; } .trust-rail span, .trust-rail p, .lullaby-status { text-transform: uppercase !important; letter-spacing: 0.16em !important; font-weight: 600 !important; font-size: 0.68rem !important; font-feature-settings: "smcp" 1, "kern" 1 !important; } /* — Section titles: deliberate two-line block; subtitle as a magazine deck. — */ .section-title, .cta-inner h2 { letter-spacing: -0.026em !important; line-height: 1.04 !important; text-wrap: balance !important; font-feature-settings: "kern" 1, "liga" 1, "ss01" 1 !important; -webkit-font-smoothing: antialiased !important; } .section-subtitle { text-wrap: pretty !important; line-height: 1.7 !important; letter-spacing: 0.003em !important; max-width: 60ch !important; margin-inline: auto; } .feature-card h3 { letter-spacing: -0.018em !important; text-wrap: balance !important; font-feature-settings: "kern" 1, "ss01" 1 !important; } .faq-question span { letter-spacing: -0.012em !important; text-wrap: balance !important; } /* — Stat block as a calibrated metric tile. — */ .hero-stats .stat-number, .stat-number { letter-spacing: -0.018em !important; line-height: 1 !important; font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1 !important; } .hero-stats .stat-label, .stat-label { text-transform: uppercase !important; letter-spacing: 0.11em !important; font-weight: 600 !important; line-height: 1.25 !important; color: var(--ink-tertiary) !important; font-feature-settings: "kern" 1 !important; } /* — The gilded editorial "point": one gold full-stop per section title (wrapped by JS into span.aw-point). One gold dot, nothing more. — */ .section-title .aw-point, .cta-inner h2 .aw-point { color: var(--brand-gold) !important; -webkit-text-fill-color: var(--brand-gold) !important; font-weight: 900 !important; } /* ========================================================================== 2. COLOR, ATMOSPHERE, DEPTH & TEXTURE Gold-led ambient light, a warm gradient-mesh canvas, and surfaces that feel like warm paper lifted off the page. ========================================================================== */ /* — Re-tune ambient glow-blobs: gold leads, teal supports, purple whispers. The last style.css blob rule-set wins, so override with !important. — */ .glow-blob { filter: blur(140px) saturate(108%) !important; mix-blend-mode: multiply !important; will-change: transform, opacity; } .glow-1 { /* GOLD — the hero light, brought forward */ background: radial-gradient(circle, rgba(var(--ae-gold), 0.42) 0%, rgba(var(--ae-gold), 0) 70%) !important; opacity: 0.22 !important; } .glow-2 { /* supporting accent — desaturated TEAL instead of vivid mint */ background: radial-gradient(circle, rgba(var(--ae-teal), 0.30) 0%, rgba(var(--ae-teal), 0) 72%) !important; opacity: 0.13 !important; } .glow-3 { /* lavender demoted to a barely-there cool counterweight */ background: radial-gradient(circle, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0) 72%) !important; opacity: 0.045 !important; } /* — Warm ivory gradient-mesh canvas: lit paper, not flat #F8F5EF. — */ body { background: radial-gradient(120% 80% at 88% -8%, rgba(var(--ae-gold), 0.10), transparent 42%), radial-gradient(90% 70% at 6% 4%, rgba(255, 247, 233, 0.9), transparent 46%), radial-gradient(80% 90% at 50% 108%, rgba(var(--ae-teal), 0.035), transparent 50%), linear-gradient(178deg, #fcf9f3 0%, #f8f5ef 46%, #fffaf2 100%) !important; background-attachment: fixed !important; } /* — Warm, layered, lit-from-above surfaces. — */ .feature-card, .calc-form-box, .faq-item, .hero-stats, .trust-item { box-shadow: var(--ae-shadow-1) !important; border-color: rgba(var(--ae-deep), 0.10) !important; } .telehealth-details-box, .calculator-layout { box-shadow: var(--ae-shadow-2) !important; } /* — Elevate the gold CTA into a lit, grounded object. — */ .cta-inner { position: relative !important; background: radial-gradient(140% 120% at 22% 0%, rgba(255, 255, 255, 0.28), transparent 40%), linear-gradient(135deg, #F8AE2E 0%, var(--brand-gold) 38%, var(--brand-deep) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 14px rgba(var(--ae-gold), 0.22), 0 34px 70px rgba(var(--ae-deep), 0.30) !important; overflow: hidden !important; } .cta-inner::before { /* soft specular sheen across the top — behind content */ content: '' !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 0 !important; background: radial-gradient(80% 50% at 70% -10%, rgba(255, 255, 255, 0.22), transparent 60%) !important; } .cta-inner::after { /* fine analog grain so the big gold field reads as paper */ content: '' !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 0 !important; opacity: 0.06 !important; mix-blend-mode: overlay !important; background-image: var(--ae-grain) !important; } .cta-inner > * { position: relative; z-index: 1; } /* keep buttons above layers */ /* — Warm the hairlines & the one dark split panel's gold core. — */ .game-info-item { border-left-color: rgba(var(--ae-gold), 0.35) !important; } .split-panel { background: radial-gradient(circle at 50% 34%, rgba(var(--ae-gold), 0.20), transparent 30%), radial-gradient(circle at 78% 88%, rgba(var(--ae-teal), 0.10), transparent 40%), linear-gradient(135deg, #241e18 0%, #100e0c 100%) !important; } .bg-cozy-gradient { background: linear-gradient(180deg, rgba(255, 246, 228, 0.55) 0%, rgba(255, 250, 242, 0.4) 60%, rgba(245, 240, 232, 0.5) 100%) !important; overflow: visible !important; } /* ========================================================================== 3. SPATIAL COMPOSITION — graduated rhythm, editorial mastheads, soft seams ========================================================================== */ /* — Content-aware vertical rhythm (asymmetric lead-in). — */ .section-container { padding-top: var(--ae-rhythm-lg) !important; padding-bottom: calc(var(--ae-rhythm-lg) - 12px) !important; } #features.section-container { padding-top: var(--ae-rhythm-xl) !important; } #games.section-container, #percentile.section-container { padding-top: var(--ae-rhythm-md) !important; padding-bottom: var(--ae-rhythm-md) !important; } #faq.section-container { padding-top: var(--ae-rhythm-md) !important; padding-bottom: clamp(48px, 5vw, 80px) !important; } .download-cta-section { margin-top: var(--ae-rhythm-md) !important; } .trust-rail { margin: clamp(8px, 2vw, 22px) auto clamp(40px, 5vw, 64px) !important; } /* — Two narrative sections get a left-anchored numbered masthead; #games and #faq stay centered for rhythm contrast. — */ #features > .section-title, #percentile > .section-title { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; max-width: 16ch !important; position: relative; padding-top: 34px !important; } #features > .section-subtitle, #percentile > .section-subtitle { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 52ch !important; margin-bottom: clamp(40px, 4.5vw, 64px) !important; } #features > .section-title::before, #percentile > .section-title::before { position: absolute; top: 4px; left: 2px; font-family: var(--font-heading); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-deep); display: flex; align-items: center; gap: 14px; opacity: 0.92; } #features > .section-title::before { content: "01 — Platform"; } #percentile > .section-title::before { content: "02 — Büyüme"; } #features > .section-title::after, #percentile > .section-title::after { content: ""; position: absolute; top: 13px; left: 128px; width: clamp(40px, 8vw, 96px); height: 1px; background: linear-gradient(90deg, var(--brand-gold), rgba(var(--ae-gold), 0)); } /* — Centered sections get a small gold eyebrow tick (harmonize, don't copy). — */ #games > .section-title, #faq > .section-title { position: relative; padding-top: 30px !important; max-width: 18ch !important; } #games > .section-title::before, #faq > .section-title::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 34px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--brand-gold), var(--brand-deep)); opacity: 0.9; } #games > .section-subtitle, #faq > .section-subtitle { max-width: 56ch !important; margin-bottom: clamp(40px, 4.5vw, 60px) !important; } /* — Grid-breaking asymmetry: the lead feature reads wider than a uniform tile. Two .highlighted-card come first, then .interactive-ai-card (verified). — */ @media (min-width: 1025px) { .features-grid { grid-template-columns: repeat(12, 1fr) !important; gap: clamp(18px, 1.6vw, 26px) !important; align-items: stretch; } .features-grid > .feature-card.highlighted-card { grid-column: span 7 !important; } .features-grid > .feature-card.highlighted-card + .feature-card.highlighted-card { grid-column: span 5 !important; } .features-grid > .interactive-ai-card { grid-column: span 8 !important; } .features-grid > .feature-card:not(.highlighted-card):not(.interactive-ai-card) { grid-column: span 4 !important; } .features-grid > .feature-card.highlighted-card { padding: clamp(26px, 2.2vw, 38px) !important; } /* Resolve the trailing orphan: the first plain tile sits beside the wide interactive card (8 + 4 = 12); the remaining four plain tiles pair into two clean 6 + 6 rows, so the grid resolves with no card left alone. */ .features-grid > .interactive-ai-card + .feature-card { grid-column: span 4 !important; } .features-grid > .interactive-ai-card + .feature-card ~ .feature-card { grid-column: span 6 !important; } } /* — Soft warm seams: feather hard section cuts; gold under-glow into the CTA. — */ #games.section-container, #percentile.section-container, .download-cta-section { position: relative; isolation: isolate; } #games.section-container::before, #percentile.section-container::before { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--ae-seam); background: linear-gradient(180deg, rgba(248, 245, 239, 0.9) 0%, rgba(248, 245, 239, 0) 100%); pointer-events: none; z-index: 0; } /* #games is a rounded cozy-gradient card with overflow:visible — clip the seam to its rounded top so it can't bleed a hair past the corners. */ #games.section-container::before { border-radius: 40px 40px 0 0; } .download-cta-section::before { content: ""; position: absolute; left: 50%; top: calc(-1 * var(--ae-seam)); transform: translateX(-50%); width: min(1180px, 92%); height: calc(var(--ae-seam) + 24px); background: radial-gradient(ellipse at 50% 100%, rgba(var(--ae-gold), 0.10), transparent 70%); pointer-events: none; z-index: 0; } /* Lift the dark CTA so it overlaps the gold seam — depth, not a gap. */ @media (min-width: 769px) { .cta-inner { z-index: 1; transform: translateY(-10px); } } /* ========================================================================== 4. MOTION — reveal states + gold micro-interactions The existing app.js observer drives .feature-card/.game-info-item/.faq-item via .revealed (with inline transitionDelay). We refine those END states and add an isolated .ae-reveal / .ae-in namespace (driven by award-elevation.js) for the previously-unanimated type, CTAs, trust-rail & final CTA. ========================================================================== */ /* — Refine the reveal app.js already drives: blur-lift editorial cascade. — */ .feature-card, .game-info-item, .faq-item { opacity: 0 !important; transform: translateY(26px) scale(0.985) !important; filter: blur(6px) !important; transition: opacity 0.9s var(--ae-ease-entrance), transform 0.9s var(--ae-ease-entrance), filter 0.7s var(--ae-ease-entrance), box-shadow 0.55s var(--ae-ease-spring) !important; will-change: transform, opacity, filter; } .feature-card.revealed, .game-info-item.revealed, .faq-item.revealed { opacity: 1 !important; transform: translateY(0) scale(1) !important; filter: blur(0) !important; } /* Warm gold "landing" bloom on arrival, then settle to the calm boardroom shadow. */ .feature-card.revealed { animation: aeLandGlow 1.2s var(--ae-ease-entrance) both; } @keyframes aeLandGlow { 0% { box-shadow: var(--ae-shadow-1); } 45% { box-shadow: var(--ae-edge-hi), 0 26px 50px rgba(var(--ae-gold), 0.16); } 100% { box-shadow: var(--ae-shadow-1); } } /* — Isolated reveal namespace (never collides with .revealed/.is-visible). — */ .ae-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.95s var(--ae-ease-entrance), transform 0.95s var(--ae-ease-entrance); transition-delay: var(--ae-delay, 0s); will-change: transform, opacity; } .ae-reveal.ae-in { opacity: 1; transform: translateY(0); } /* Headlines get more travel + a focus-in blur for editorial weight. */ .section-title.ae-reveal, .hero-content h1.ae-reveal { transform: translateY(28px); filter: blur(5px); transition: opacity 1s var(--ae-ease-entrance), transform 1s var(--ae-ease-entrance), filter 0.8s var(--ae-ease-entrance); transition-delay: var(--ae-delay, 0s); } .section-title.ae-reveal.ae-in, .hero-content h1.ae-reveal.ae-in { filter: blur(0); transform: translateY(0); } .trust-rail.ae-reveal { transform: translateY(16px); } /* — Magnetic + tactile gold CTAs (compose magnetic offset INTO the board lift). — */ .btn-store, .btn-header-cta { position: relative; overflow: hidden; transform: translate(var(--ae-mx, 0px), var(--ae-my, 0px)) !important; transition: transform 0.5s var(--ae-ease-spring), box-shadow 0.5s var(--ae-ease-spring), background-color 0.3s ease !important; } .btn-store:hover, .btn-header-cta:hover { transform: translate(var(--ae-mx, 0px), calc(var(--ae-my, 0px) - 3px)) scale(1.015) !important; } .btn-store:active, .btn-header-cta:active { transform: translate(var(--ae-mx, 0px), calc(var(--ae-my, 0px) + 1px)) scale(0.975) !important; transition: transform 0.09s var(--ae-ease-press) !important; } /* Gold sheen sweep — the only place gold is allowed to travel. */ .btn-store::after, .btn-header-cta::after { content: ""; position: absolute; top: 0; left: -130%; width: 70%; height: 100%; background: linear-gradient(100deg, transparent, rgba(var(--ae-gold), 0) 20%, rgba(255, 246, 230, 0.55) 50%, rgba(var(--ae-gold), 0) 80%, transparent); transform: skewX(-18deg); pointer-events: none; transition: left 0.75s var(--ae-ease-entrance); } .btn-store:hover::after, .btn-header-cta:hover::after { left: 130%; } /* — Nav: gold underline sweep (additive to the existing color hover). — */ .nav-links a { position: relative; transition: color 0.25s var(--ae-ease-spring) !important; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand-gold), var(--brand-deep)); transform: scaleX(0); transform-origin: left center; transition: transform 0.4s var(--ae-ease-entrance); } .nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); } /* — Card hover: refined spring lift + faint gold ring + tactile press. — */ .feature-card.revealed:hover { transform: translateY(-6px) scale(1.012) !important; box-shadow: var(--ae-shadow-hover) !important; border-color: rgba(var(--ae-gold), 0.30) !important; } .feature-card.revealed:active { transform: translateY(-2px) scale(0.997) !important; transition: transform 0.1s var(--ae-ease-press) !important; } /* — Ambient hero glow drift: slow, offset, low-amplitude (transform/opacity). — */ .glow-1 { animation: aeGlowDriftA 32s var(--ae-ease-spring) infinite alternate; } .glow-2 { animation: aeGlowDriftB 40s var(--ae-ease-spring) infinite alternate; animation-delay: -6s; } .glow-3 { animation: aeGlowDriftA 28s var(--ae-ease-spring) infinite alternate; animation-delay: -12s; } @keyframes aeGlowDriftA { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(3%, -4%, 0) scale(1.06); } 100% { transform: translate3d(-2%, 2%, 0) scale(0.97); } } @keyframes aeGlowDriftB { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-3%, 3%, 0) scale(1.05); } 100% { transform: translate3d(2%, -3%, 0) scale(0.98); } } /* ========================================================================== 5. FINISH — scrollbar, focus rings, badges, progress bar, lullaby ========================================================================== */ /* — Theme the global scrollbar to ivory + honey (kills the black gutter). — */ ::-webkit-scrollbar { width: 10px !important; height: 10px !important; } ::-webkit-scrollbar-track { background: rgba(28, 26, 23, 0.04) !important; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(var(--ae-gold), 0.55), rgba(232, 150, 26, 0.7)) !important; border-radius: 99px !important; border: 2px solid transparent !important; background-clip: padding-box !important; transition: background 0.25s ease !important; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--brand-gold), var(--brand-deep)) !important; background-clip: padding-box !important; } html { scrollbar-color: rgba(232, 150, 26, 0.6) rgba(28, 26, 23, 0.04); scrollbar-width: thin; } /* — Dual-tone focus ring that survives ivory AND dark surfaces (box-shadow so it follows radius and can't be killed by an outline:none reset). — */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .faq-question:focus-visible, .tab-item:focus-visible { outline: none !important; box-shadow: 0 0 0 2px var(--bg-main), 0 0 0 4.5px var(--brand-gold) !important; border-radius: 8px; } .btn-store:focus-visible, .btn-header-cta:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 5px var(--brand-gold) !important; } .lullaby-toggle-btn:focus-visible { outline: none !important; box-shadow: 0 0 0 2px rgba(28, 26, 23, 0.9), 0 0 0 4.5px var(--brand-gold), 0 4px 12px rgba(var(--ae-gold), 0.3) !important; } .faq-question:focus-visible { border-radius: 14px; } /* — Refined scroll-progress bar: rounded honey rail + soft leading cap. — */ .scroll-progress-bar { height: 3px !important; background: linear-gradient(90deg, var(--brand-deep) 0%, var(--brand-gold) 70%, #FFC65C 100%) !important; border-radius: 0 99px 99px 0 !important; box-shadow: 0 0 10px rgba(var(--ae-gold), 0.45), 0 1px 0 rgba(255, 255, 255, 0.4) !important; } .scroll-progress-bar::after { content: '' !important; position: absolute !important; right: 0; top: 50%; width: 8px; height: 8px; transform: translate(50%, -50%); border-radius: 50%; background: #FFD27A; box-shadow: 0 0 8px 2px rgba(var(--ae-gold), 0.55); opacity: 0.9; } /* — Unified badge & pill finish language. — */ .badge-hero { border: 1px solid rgba(var(--ae-gold), 0.22) !important; background: linear-gradient(180deg, var(--brand-soft), rgba(255, 245, 224, 0.6)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important; } .hero-proof-row span { border: 1px solid rgba(28, 26, 23, 0.07) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; transition: border-color 0.25s ease, transform 0.25s ease !important; } .hero-proof-row span:hover { border-color: rgba(var(--ae-gold), 0.3) !important; transform: translateY(-1px) !important; } .badge-feature-premium { letter-spacing: 0.04em !important; text-transform: uppercase !important; border-radius: 99px !important; } /* — Lullaby widget finish: crisper shadow, hover lift, gentle entrance. (.reveal added by award-elevation.js; keyboard ring handled above.) — */ .lullaby-player-widget { box-shadow: 0 16px 38px rgba(31, 26, 20, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important; transition: transform 0.45s var(--ae-ease-entrance), box-shadow 0.3s ease, opacity 0.45s ease !important; } .lullaby-player-widget:hover { transform: translateY(-2px) !important; box-shadow: 0 22px 46px rgba(31, 26, 20, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; } .lullaby-player-widget:not(.reveal) { opacity: 0; transform: translateY(14px) scale(0.96); } .lullaby-player-widget.reveal { opacity: 1; } /* — Consistent press physics + accessible touch targets. — */ .tab-item:active { transform: scale(0.94) !important; } .faq-question:active { background: rgba(var(--ae-gold), 0.05) !important; } .btn-header-cta { min-height: 44px !important; } /* — Warm honey selection. — */ ::selection { background-color: rgba(var(--ae-gold), 0.22) !important; color: var(--ink-dark) !important; } ::-moz-selection { background-color: rgba(var(--ae-gold), 0.22); color: var(--ink-dark); } /* ========================================================================== 6. RESPONSIVE REFINEMENTS — refine, never regress ========================================================================== */ @media (max-width: 768px) { :root { --ae-rhythm-xl: 84px; --ae-rhythm-lg: 68px; --ae-rhythm-md: 56px; } .section-container { padding-top: var(--ae-rhythm-lg) !important; padding-bottom: calc(var(--ae-rhythm-lg) - 8px) !important; } #features.section-container { padding-top: var(--ae-rhythm-xl) !important; } /* fixed-attachment repaint cost + heavy blur are expensive on phones */ body { background-attachment: scroll !important; } .glow-blob { filter: blur(110px) saturate(108%) !important; } /* left-anchored masthead reflows full-width; drop the trailing hairline */ #features > .section-title, #percentile > .section-title { max-width: 100% !important; padding-top: 30px !important; } #features > .section-title::after, #percentile > .section-title::after { display: none; } .bottom-tab-bar .tab-item { min-width: 44px !important; min-height: 44px !important; } } @media (max-width: 480px) { .hero-ctas { flex-direction: column !important; gap: 12px !important; } .btn-store { width: 100% !important; min-width: 0 !important; justify-content: center !important; } .hero-stats { width: 100% !important; } .hero-stats .stat-item { padding: 12px !important; } .hero-proof-row { gap: 8px !important; } .video-grid-container { gap: 8px !important; } .calculator-layout { grid-template-columns: 1fr !important; gap: 18px !important; } .calc-form-box { padding: 20px !important; } .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; text-align: left !important; } .faq-question { padding: 18px 16px !important; font-size: 0.98rem !important; } .lullaby-player-widget { right: 12px !important; bottom: 12px !important; max-width: 168px !important; padding: 6px 12px 6px 6px !important; } .lullaby-toggle-btn { width: 36px !important; height: 36px !important; } } /* ========================================================================== 7. REDUCED-MOTION MASTER GATE One authoritative block neutralizing EVERY motion this layer introduces, leaving content in its final, visible position. Functionality is untouched. ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } /* This layer's reveals render final + still */ .ae-reveal, .ae-reveal > * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } /* The app.js-driven reveals also rest visible if motion is reduced */ .feature-card, .game-info-item, .faq-item { opacity: 1 !important; transform: none !important; filter: none !important; transition: box-shadow 0.2s ease !important; animation: none !important; } .feature-card.revealed { animation: none !important; } /* Kill ambient + sheen motion */ .glow-blob { animation: none !important; } .btn-store::after, .btn-header-cta::after, .nav-links a::after { display: none !important; } .lullaby-player-widget { transition: opacity 0.2s ease !important; } body { background-attachment: scroll !important; } /* Honor existing decorative loops the base block missed */ .wave-bar, .bar-1, .bar-2, .bar-3, .bar-4 { animation: none !important; } .scroll-progress-bar { box-shadow: none !important; transition: none !important; } .faq-item.active .faq-question span { transition: color 0.2s ease !important; transform: none !important; } .tab-item .tab-icon-svg { transition: none !important; } } /* ========================================================================== 8. DIMENSIONAL & LAYOUT FIXES (iPhone simulator internals) -------------------------------------------------------------------------- Surgical, additive fixes for content-clip defects in the .iphone-screen mockup. Each rule targets a measured overflow/squeeze. No horizontal- overflow hacks (the document has none). !important to beat the base rules in style.css + the BOARDROOM layer. ========================================================================== */ /* --- DEFECT A: dashboard widget cards clip their footer --- style.css:1383 sets `.sim-widget-card { height:132px; overflow:hidden }`. On the scaled-down mobile phone the `.widget-val` of the vaccine card ("BCG (Verem)") and feeding card ("120ml (Mama)") wraps to TWO lines, making content ~132+32px tall. overflow:hidden then clips the `.sim-widget-footer` (the "+ Mama"/"Takvim" pill + timestamp). Fix: relax the fixed height to a min-height so each card grows to fit its content. The grid (`grid-template-columns:1fr 1fr`) default-stretches each row, so the two cards in a row stay the same height and the 2x2 grid stays visually even; the phone body scrolls, so extra height is safe. */ .sim-widget-card { height: auto !important; min-height: 132px !important; overflow: visible !important; } /* --- DEFECT B: dashboard header SOS pill squeeze-clips its text --- `.header-right` (index.html:369) has NO CSS rule, so as a flex child of `.sim-app-header` (display:flex) it is allowed to shrink. On the narrow mobile phone, `.header-left` (avatar + greeting block) consumes the row and squeezes `.header-right` down, so the `.btn-sim-emergency` pill (style.css:1298, overflow:hidden) clips "ACİL / yardım". Fix: pin header-right (don't shrink), let header-left shrink with min-width:0 so its long greeting can ellipsis instead of stealing the pill's width. */ .sim-app-header .header-right { flex-shrink: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; } .sim-app-header .header-left { min-width: 0 !important; } .sim-app-header .header-left .header-text { min-width: 0 !important; } /* Keep the greeting title from forcing the row wider than the phone: ellipsis the single long line rather than wrapping/pushing the SOS pill. */ .sim-app-header .header-text h3 { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; } /* Belt-and-braces: the SOS button must SIZE TO ITS CONTENT and never clip the "ACİL / yardım" text. flex-shrink:0 alone is not enough — the base rule pins overflow:hidden and the pill stays compressed inside header-right, so we also force width:auto + min-width:max-content (grow to fit) and overflow:visible. */ .sim-app-header .btn-sim-emergency { flex-shrink: 0 !important; width: auto !important; min-width: max-content !important; overflow: visible !important; } .sim-app-header .sim-sos-pill-content, .sim-app-header .sim-sos-text { flex-shrink: 0 !important; min-width: max-content !important; } .sim-app-header .sim-sos-text { white-space: nowrap !important; } /* ========================================================================== 8b. DIMENSIONAL & LAYOUT FIXES (breakpoint boundaries) -------------------------------------------------------------------------- Boundary-only glitches found stress-testing the exact widths where the layout switches. Surgical, additive, scoped tightly so they never touch a breakpoint that already measures fine. ========================================================================== */ /* --- DEFECT C: features grid — lone half-card orphan in the TABLET range --- Above 1025px the section-3 12-col masthead grid resolves cleanly (verified 7/5 · 8/4 · 6/6 · 6/6, no orphan). But from 769–1024px the section-3 rule does NOT apply and the BASE grid takes over (style.css:3124-3131): a plain 2-column grid with `.interactive-ai-card` spanning both columns. The markup holds 8 cards (2 highlighted + 1 interactive + 5 plain, index.html:1173-1243), which lays out as: row1 highlighted | highlighted row2 interactive-ai (span 2) row3 plain | plain row4 plain | plain row5 plain <-- LONE half-width orphan The 5th plain card (the grid's :last-child) sits alone in a half-width cell — a ragged, unbalanced tail right at the 1024px boundary. Span it full-width so the tablet grid closes evenly. Scoped 769–1024 so it never affects the >=1025 12-col layout above or the <=768 single-column stack below. */ @media (min-width: 769px) and (max-width: 1024px) { .features-grid > .feature-card:last-child { grid-column: 1 / -1 !important; } } /* ========================================================================== 8c. DIMENSIONAL & LAYOUT FIXES (tablet bento + elevation side-effects) -------------------------------------------------------------------------- post-launch QA, live-measured. Three additional surgical fixes that don't collide with §8 / §8b above: • video bento renders as 3 tall slivers in the 769–980px tablet band • the §3 warm-seam pseudo veils the top of the #games/#percentile titles • the §3 download-CTA gold under-glow is clipped by overflow:hidden and never paints Additive, !important where needed, each scoped tightly to the measured defect. No horizontal-overflow hacks (the document has none). ========================================================================== */ /* --- DEFECT D: video bento — 3 tall narrow slivers in the tablet band --- `.video-grid-container` is `grid-template-columns:repeat(3,1fr)` at base (style.css:4315) and only drops to one column at <=768px (style.css:7849, 8296). `.video-grid-column` is force-sized `height:clamp(360px,42vw,440px)` unconditionally (style.css:8108). So from 769–980px (where the nav has already collapsed to a hamburger) the bento stays 3 columns, each only ~215–240px wide but 360px+ tall — three cramped portrait slivers that read as a layout break. Collapse to ONE full-width card across the whole tablet band and give it a calm landscape height. Scoped 769–980 so the verified <=768 single-column behaviour (and its clamp(360px) column height) is left exactly as-is, and >=981 keeps the 3-up bento. */ @media (min-width: 769px) and (max-width: 980px) { .video-grid-container { grid-template-columns: 1fr !important; gap: 18px !important; } .video-grid-column { height: clamp(240px, 46vw, 380px) !important; } } /* --- DEFECT E: warm-seam pseudo veils the section title's first line --- The §3 seam `#games::before` / `#percentile::before` is `position:absolute; inset:0 0 auto 0; height:var(--ae-seam); z-index:0` over a section with `isolation:isolate`. The `.section-title` / `.section-subtitle` are direct, NON-positioned children, so the near-opaque ivory seam paints ABOVE them and washes out the first line. Lift the title text onto its own stacking level so it renders at full contrast above the seam. */ #games > .section-title, #games > .section-subtitle, #percentile > .section-title, #percentile > .section-subtitle { position: relative !important; z-index: 1 !important; } /* --- DEFECT F: download-CTA gold under-glow is clipped and never renders --- The §3 `.download-cta-section::before` glow is positioned ABOVE the section (top:calc(-1*--ae-seam)) to bleed gold up into the FAQ gap, but style.css:5310 gives the section `overflow:hidden` (needed for its base ::after drift-gradient), which clips the upward pseudo entirely — so the glow never paints. Re-home the glow onto the preceding section (#faq, which has no overflow:hidden, DOM-adjacent at index.html:1467→1500) and feather it DOWNWARD into the same gap. Same warm-gold, same intent, now visible. */ .download-cta-section::before { display: none !important; } #faq.section-container { position: relative; } #faq.section-container::after { content: ""; position: absolute; left: 50%; bottom: calc(-1 * var(--ae-seam)); transform: translateX(-50%); width: min(1180px, 92%); height: calc(var(--ae-seam) + 24px); background: radial-gradient(ellipse at 50% 0%, rgba(var(--ae-gold), 0.10), transparent 70%); pointer-events: none; z-index: 0; } /* ========================================================================== 9. POLISH FIXES (buttons, lullaby, masthead consistency) — user QA round 2 -------------------------------------------------------------------------- Targeted visual corrections requested after live review. Additive, !important. ========================================================================== */ /* --- 9a. Store-button small labels read gray (base sets opacity:0.7). Make "APP STORE'DAN" / "GOOGLE PLAY'DEN" crisp white so the badge looks finished. */ .btn-store .btn-store-text span { color: #ffffff !important; opacity: 0.92 !important; } .btn-store .btn-store-text strong { color: #ffffff !important; } /* --- 9b. Header CTA "Hemen İndir": white-on-gold was washed/low-contrast. Use charcoal ink on the gold for a high-contrast, premium, readable button (the brand's own convention for type on yellow). Stays dark on the deeper gold hover too. */ .btn-header-cta { color: var(--ink-dark) !important; font-weight: 800 !important; letter-spacing: -0.005em !important; } .btn-header-cta:hover { color: var(--ink-dark) !important; } /* --- 9c. Lullaby widget: the collapsed state was a heavy dark glass square wrapping a gold circle (visually clumsy). Collapsed = a clean floating gold button only; the dark glass pill + "Bebek Ninnisi" label appear on hover/playing. Keeps every existing class/handler. */ .lullaby-player-widget:not(:hover):not(.playing) { background: transparent !important; border-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; padding: 0 !important; gap: 0 !important; max-width: 54px !important; } .lullaby-player-widget:hover, .lullaby-player-widget.playing { background: rgba(28, 26, 23, 0.74) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; backdrop-filter: blur(20px) saturate(170%) !important; -webkit-backdrop-filter: blur(20px) saturate(170%) !important; box-shadow: 0 16px 38px rgba(40, 30, 16, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; padding: 8px 18px 8px 8px !important; max-width: 220px !important; } .lullaby-toggle-btn { flex-shrink: 0 !important; width: 48px !important; height: 48px !important; background: radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.4), transparent 45%), linear-gradient(135deg, #FBB43C 0%, var(--brand-gold) 45%, var(--brand-deep) 100%) !important; box-shadow: 0 8px 22px rgba(var(--ae-gold), 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important; color: #ffffff !important; } .lullaby-toggle-btn .music-icon { width: 20px !important; height: 20px !important; } /* --- 9d. Section-header consistency. #features and #percentile used a LEFT-anchored numbered masthead ("01 — Platform" / hairline) while #games and #faq are centered — the mix read as broken. Make all four CENTERED + uniform: a centered gold tick, centered title, centered subtitle. */ #features > .section-title, #percentile > .section-title { text-align: center !important; margin-left: auto !important; margin-right: auto !important; max-width: 22ch !important; padding-top: 30px !important; } #features > .section-subtitle, #percentile > .section-subtitle { text-align: center !important; margin-left: auto !important; margin-right: auto !important; max-width: 56ch !important; } /* Replace the "01 — Platform" / "02 — Büyüme" eyebrow + side hairline with the same centered gold tick used by #games / #faq. */ #features > .section-title::before, #percentile > .section-title::before { content: "" !important; top: 0 !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: 34px !important; height: 3px !important; border-radius: 3px !important; background: linear-gradient(90deg, var(--brand-gold), var(--brand-deep)) !important; opacity: 0.9 !important; font-size: 0 !important; letter-spacing: normal !important; gap: 0 !important; display: block !important; padding: 0 !important; } #features > .section-title::after, #percentile > .section-title::after { display: none !important; } /* ========================================================================== 10. EXTREME PROFESSIONAL POLISH (holistic consistency pass) -------------------------------------------------------------------------- One calibrated system layered on §0–§9. The goal here is RESTRAINT and CONSISTENCY, not decoration: every rule below removes a divergence so the whole page reads as one hand — one type hierarchy, one body scale, one eyebrow language, one radius scale, one motion physics, AA-clean text. Builds on §9 (keeps centered headers, dark-ink-on-gold header CTA, lullaby) and §1 (keeps hero gild + eyebrow identity). Additive, !important, no class/id/onclick touched, no markup change, no horizontal-overflow hacks. Deliberately DROPPED (see manifest): the speculative 1180px hero width override (risked regressing the confirmed-clean hero/trust/bento layout); per-section 14px CTA button radius (unified to the page's 16px instead). ========================================================================== */ /* -------------------------------------------------------------------------- 10.1 TYPE — one section-heading tier (weight · leading · tracking) The same masthead role resolved to four settings (900/1.05, 900/1.15, 900/1.10, 800/none). Lock all four to 900 · 1.04 · -0.03em so every section head reads from one hand. The two SUB heads (telehealth + video) ride one notch below the primary .section-title on the same fluid curve. -------------------------------------------------------------------------- */ .section-title, .telehealth-info h2, .video-title, .cta-inner h2 { font-family: var(--font-body) !important; font-weight: 900 !important; line-height: 1.04 !important; letter-spacing: -0.03em !important; text-wrap: balance !important; font-feature-settings: "kern" 1, "liga" 1, "ss01" 1 !important; } .telehealth-info h2, .video-title { font-size: clamp(1.9rem, 3.2vw, 2.85rem) !important; } /* -------------------------------------------------------------------------- 10.2 TYPE — body copy on TWO calibrated steps (was 5 sizes / 6 leadings) Primary body = 0.95rem / 1.65. Secondary (nested list / result / caption) = 0.88rem / 1.55. Collapses eleven ad-hoc values to two clean steps. -------------------------------------------------------------------------- */ .feature-card p, .game-info-item p, .telehealth-info p { font-size: 0.95rem !important; line-height: 1.65 !important; letter-spacing: 0.002em !important; text-wrap: pretty !important; } .telehealth-list p, .calc-results-pill p, .sandbox-desc { font-size: 0.88rem !important; line-height: 1.55 !important; letter-spacing: 0.003em !important; text-wrap: pretty !important; } /* -------------------------------------------------------------------------- 10.3 TYPE — card / list title tier: one weight · tracking · family Titles spanned 0.95–1.35rem with mixed tracking and two families. Pin the ROLE to 800 · -0.018em · DM Sans, then step the sizes cleanly by context. -------------------------------------------------------------------------- */ .feature-card h3, .calc-form-box h3, .sandbox-title, .game-info-item strong, .telehealth-list strong, .chart-header h3 { font-family: var(--font-body) !important; font-weight: 800 !important; letter-spacing: -0.018em !important; line-height: 1.2 !important; text-wrap: balance !important; font-feature-settings: "kern" 1, "ss01" 1 !important; } .feature-card h3 { font-size: 1.26rem !important; } .calc-form-box h3, .chart-header h3 { font-size: 1.24rem !important; } .sandbox-title { font-size: 1.18rem !important; } /* -------------------------------------------------------------------------- 10.4 TYPE — one eyebrow/tag language: gold-family, em tracking, no px px tracking does not scale with font-size. Convert the two stray eyebrows to em-based tracking on the gold family. (.section-tag-gold text color is set to AA brand-ink in §10.7; the lavender premium badge is re-skinned to the warm-gold badge vocabulary in §10.7.) -------------------------------------------------------------------------- */ .section-tag-gold { font-size: 0.72rem !important; font-weight: 800 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-feature-settings: "smcp" 1, "kern" 1 !important; } .badge-feature-premium { font-size: 0.66rem !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-feature-settings: "smcp" 1, "kern" 1 !important; } /* -------------------------------------------------------------------------- 10.5 TYPE — instrument-grade tabular figures on live readout numbers §1 covers the sim/hero stats; this catches the calculator's slider-driven values so digit widths stay locked (no horizontal jitter as numbers update). -------------------------------------------------------------------------- */ .slider-val-badge, .ring-text, #txt-weight-pct, #txt-height-pct, .ring-label, .chart-badge, .history-count, .vac-progress-text, #vac-progress-text { font-variant-numeric: tabular-nums lining-nums !important; font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1 !important; } /* -------------------------------------------------------------------------- 10.6 TYPE — section deck + FAQ question settle to the system voice §1 set .section-subtitle to 60ch / lh 1.70; refine to one resolved leading (1.62), a deliberate 450 weight, and the standard secondary ink. FAQ question text inherits the card-title voice instead of browser defaults. -------------------------------------------------------------------------- */ .section-subtitle, .video-subtitle { font-weight: 450 !important; line-height: 1.62 !important; letter-spacing: 0.004em !important; text-wrap: pretty !important; } .section-subtitle { font-size: 1.04rem !important; } .faq-question { font-family: var(--font-body) !important; font-weight: 700 !important; font-size: 1.02rem !important; line-height: 1.4 !important; letter-spacing: -0.012em !important; } .faq-question span { font-weight: 400 !important; font-variant-numeric: tabular-nums !important; } /* -------------------------------------------------------------------------- 10.7 COLOR — brand-colored TEXT to AA; gold stays an ACCENT only Gold/deep used as small label TYPE failed AA (~1.7–1.9:1). Darken the TEXT to the existing --brand-ink #8A5A12 (~5:1 on ivory); leave gold fills, icons, dots, rings untouched. Mint status TEXT → deep green. Bento deck → standard secondary ink. The lone lavender premium badge joins the warm-gold badge language (kills the only off-palette chip on the page). -------------------------------------------------------------------------- */ .section-tag-gold { color: var(--brand-ink) !important; } /* ~5:1 */ .vac-status-row.text-gold { color: var(--brand-ink) !important; } .vac-status-row.text-gold .vac-status-icon { color: var(--brand-gold) !important; } .vac-status-row.text-mint { color: #0E7A5F !important; } /* ~4.7:1 */ .vac-status-row.text-mint .vac-status-icon { color: var(--accent-mint) !important; } .video-subtitle { color: var(--ink-secondary) !important; } /* ~6.6:1 */ .badge-feature-premium { background: linear-gradient(180deg, var(--brand-soft), rgba(255, 245, 224, 0.6)) !important; color: var(--brand-ink) !important; /* AA on soft gold */ border: 1px solid rgba(var(--ae-gold), 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important; } /* -------------------------------------------------------------------------- 10.8 COLOR/DEPTH — small pills inherit the §0 lit-from-above vocabulary A few chips still carried ad-hoc borders/shadows. Give them the one warm hairline + top-edge highlight so every pill shares one depth treatment. (Touches only border/box-shadow — never layout — so the scaled phone mockup the sim lives in is not disturbed.) -------------------------------------------------------------------------- */ .sim-stat-pill { border: 1px solid rgba(var(--ae-deep), 0.10) !important; box-shadow: var(--ae-edge-hi), 0 1px 2px rgba(40, 30, 16, 0.04) !important; } .vac-dose-badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; } /* -------------------------------------------------------------------------- 10.9 COMPONENTS — ONE button physics across all four store/CTA buttons The CTA-section light buttons carry both .btn-store (so §4's magnetic spring/press/sheen already applies) AND competing base `transition:all 0.3s` + `:hover{translateY(-3px)}`. Silence the base motion so only the §4 recipe drives hover/active, add the missing :active press, and give them the white-backed focus ring that survives the dark gold .cta-inner field. -------------------------------------------------------------------------- */ .btn-appstore-light, .btn-playstore-light { transition: transform 0.5s var(--ae-ease-spring), box-shadow 0.5s var(--ae-ease-spring), background-color 0.3s ease !important; } .btn-appstore-light:hover, .btn-playstore-light:hover { transform: translate(var(--ae-mx, 0px), calc(var(--ae-my, 0px) - 3px)) scale(1.015) !important; } .btn-appstore-light:active, .btn-playstore-light:active { transform: translate(var(--ae-mx, 0px), calc(var(--ae-my, 0px) + 1px)) scale(0.975) !important; transition: transform 0.09s var(--ae-ease-press) !important; } .btn-appstore-light:focus-visible, .btn-playstore-light:focus-visible { outline: none !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 5px var(--brand-gold) !important; } /* -------------------------------------------------------------------------- 10.10 COMPONENTS — ONE button geometry (16px) + ONE card geometry (22px) Buttons split 16px vs a 30px header pill; cards split 20/22 + a 16px nested pill. Unify all buttons to the dominant/documented 16px, all top-level cards to the documented 22px. The calc results pill stays intentionally tighter (16px) because it is NESTED inside a 22px form card. -------------------------------------------------------------------------- */ .btn-store, .btn-header-cta, .btn-appstore-light, .btn-playstore-light { border-radius: 16px !important; } .faq-item { border-radius: 22px !important; } .calc-results-pill { border-radius: 16px !important; } /* Small content-chip tier shares one radius (was an 8px / 12px split). */ .hero-proof-row span, .slider-val-badge { border-radius: 10px !important; } /* -------------------------------------------------------------------------- 10.11 COMPONENTS — retime the two motion stragglers onto §0 curves The results pill and footer links ran on browser-default ease while every other surface moves on the award curves. Scope `all` down to what animates. -------------------------------------------------------------------------- */ .calc-results-pill { transition: background-color 0.3s var(--ae-ease-spring), border-color 0.3s var(--ae-ease-spring), transform 0.3s var(--ae-ease-spring) !important; } .footer-links a { transition: color 0.25s var(--ae-ease-spring) !important; } /* -------------------------------------------------------------------------- 10.12 COHESION — trust-rail: stop shouting (the page's biggest "templated" tell). §1's eyebrow uppercase was over-applied to FULL Turkish sentences at 0.68rem / 0.16em — cramped shouting that wrapped awkwardly. Restore calm, confident sentence case (the genuine eyebrow, .lullaby-status, is untouched because it is not re-listed). Then equalize the four tiles onto the feature-card radius + §0 hairline so they read as one precise instrument row. -------------------------------------------------------------------------- */ .trust-item span, .trust-rail span, .trust-rail p { text-transform: none !important; letter-spacing: -0.005em !important; font-weight: 650 !important; font-size: 0.9rem !important; line-height: 1.3 !important; color: var(--ink-secondary) !important; font-feature-settings: "kern" 1, "liga" 1 !important; } @media (max-width: 1024px) { .trust-item span { font-size: 0.86rem !important; } } .trust-item { border-radius: 16px !important; gap: 11px !important; padding: 16px 18px !important; border-color: rgba(var(--ae-deep), 0.10) !important; box-shadow: var(--ae-shadow-1) !important; align-items: center !important; } .trust-item svg { width: 21px !important; height: 21px !important; color: var(--brand-deep) !important; } /* -------------------------------------------------------------------------- 10.13 COHESION — download-CTA store buttons: ONE finished button language. The hero/header speak rich two-line .btn-store badges; the CTA spoke bare low-contrast text pills. Lift them to a single finished pair — solid white primary, crisp readable ghost secondary — at the unified 16px radius and the §4 spring physics. (Markup has no SVG to inject without editing HTML, so we lift surface + typographic quality. Press/focus physics come from §10.9.) -------------------------------------------------------------------------- */ .cta-buttons { gap: 14px !important; } .cta-buttons .btn-store { min-height: 52px !important; padding: 0 26px !important; border-radius: 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-weight: 800 !important; letter-spacing: -0.006em !important; font-size: 1rem !important; } .cta-buttons .btn-appstore-light { background: #ffffff !important; color: var(--brand-deep) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; } .cta-buttons .btn-appstore-light:hover { background: #ffffff !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; } .cta-buttons .btn-playstore-light { background: rgba(255, 255, 255, 0.10) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.45) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .cta-buttons .btn-playstore-light:hover { background: rgba(255, 255, 255, 0.18) !important; } /* CTA deck: cap the measure + lift contrast a hair so the final copy reads as deliberately as the section decks above it. */ .cta-inner p { max-width: 46ch !important; margin-inline: auto !important; opacity: 0.94 !important; line-height: 1.6 !important; text-wrap: pretty !important; } /* -------------------------------------------------------------------------- 10.14 COHESION — video bento: align badge + label band to the pill language The eyebrow .video-badge used a 12px radius while every other eyebrow/pill is fully rounded; deepen the frosted .col-label glass marginally so the white label text stays crisp on bright video frames. (Layout/blur untouched.) -------------------------------------------------------------------------- */ .video-badge { border-radius: 99px !important; letter-spacing: 0.12em !important; border-color: rgba(var(--ae-gold), 0.30) !important; } .col-label { background: rgba(20, 16, 12, 0.34) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important; } /* -------------------------------------------------------------------------- 10.15 COHESION — footer: tighten copyright rhythm, optically center heart Constrain the run-on copyright measure, relax leading, and vertically center the inline Lucide heart so the page closes with the same composure as above. -------------------------------------------------------------------------- */ .footer-bottom p { max-width: 640px !important; margin-inline: auto !important; line-height: 1.7 !important; letter-spacing: 0.002em !important; display: inline-flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 0 6px !important; } .footer-bottom .footer-heart { width: 14px !important; height: 14px !important; vertical-align: -2px !important; position: relative !important; top: 1px !important; } /* ========================================================================== 10.16 CASCADE CORRECTIONS — true button-radius unification + RM completeness -------------------------------------------------------------------------- The §10.10 radius unification lost to BOARDROOM FINISH !important rules (.btn-store=15px, .btn-header-cta=14px). Force the full button family to ONE 16px corner so all four button types are truly identical geometry. Also neutralize the §10.9 CTA-button hover/active scale under reduced-motion (the §7 master gate predates these selectors) for strict a11y parity. */ .btn-store, .btn-header-cta, .btn-appstore-light, .btn-playstore-light { border-radius: 16px !important; } @media (prefers-reduced-motion: reduce) { .btn-store, .btn-header-cta, .btn-appstore-light, .btn-playstore-light { transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important; } .btn-store:hover, .btn-header-cta:hover, .btn-appstore-light:hover, .btn-playstore-light:hover, .btn-store:active, .btn-header-cta:active, .btn-appstore-light:active, .btn-playstore-light:active { transform: none !important; } } /* ========================================================================== 11. BRAND LOGO — inline badge logosu (logo-badge.png) -------------------------------------------------------------------------- Kullanımdaki tek logo dosyası logo-badge.png (favicon, apple-touch-icon, og/twitter image ve header/footer/intro ). Şeffaf "iki figür" mark'ı (logo-mark) denendi, vazgeçildi — burada referansı yok. Kurallar kare app-icon kartını iptal ediyor: card box-shadow + border-radius kaldırılır ve boyut HEIGHT üzerinden verilir, genişlik auto kalır ki hafif geniş badge kare kutuya sıkışmak yerine tam boy render edilsin. */ .header-logo-img, .footer-logo-img, .intro-logo-img { width: auto !important; border-radius: 0 !important; box-shadow: none !important; object-fit: contain !important; } /* header logo needs the same specificity as base `.logo img.header-logo-img` (style.css:6468, !important 38x38) to win the cascade. */ /* Full badge logo (figures + "Ebeveynn" wordmark) is now used inline — size it bigger so the wordmark is legible, and give a subtle drop-shadow so the cream badge separates from the light header. */ .header-logo-img, .logo img.header-logo-img { height: 46px !important; width: auto !important; filter: drop-shadow(0 2px 6px rgba(40, 30, 16, 0.14)) !important; } .footer-logo-img { height: 58px !important; } .intro-logo-img { height: 132px !important; } /* ========================================================================== 12. HEADER CTA TEXT CENTERING -------------------------------------------------------------------------- "Hemen İndir" rendered display:block + text-align:start, so the label sat left with empty space on the right (looked off-center). Center it. */ .btn-header-cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } /* ========================================================================== 13. TELESAĞLIK GEÇİCİ GİZLİ — DÜZEN UYARLAMASI -------------------------------------------------------------------------- Telesağlık blokları index.html'de