/* ============================================================ Longevity — multi-theme "design worlds" Built for an elderly travelling couple: large type, high contrast, big tap targets. Every theme keeps those. Theme is set via . Each theme overrides design tokens (colour + font + shape + shadow + hero grade) and adds a few structural touches for a distinct *feeling*. Themes: nordic (default) · mediterranean · botanical · vintage · evening · ghibli ============================================================ */ /* ---------- BASE TOKENS = NORDIC (default) ---------- */ :root { --slate:#3a5a6e; --slate-lt:#5b7d92; --birch:#f6f3ec; --birch-2:#fffdf8; --moss:#9fb89a; --moss-dk:#6f8c6a; --copper:#b5764a; --copper-dk:#9a6038; --ink:#233039; --ink-soft:#44545d; --mist:#dfe6e9; --bg:var(--birch); --surface:var(--birch-2); --text:var(--ink); --text-soft:var(--ink-soft); --border:var(--mist); --accent:var(--copper); --accent-dk:var(--copper-dk); --brand:var(--slate); /* typography */ --font-head:"Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; --font-body:"Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; --head-weight:800; --head-spacing:.2px; --head-transform:none; --head-style:normal; --fs-base:1.18rem; --fs-lg:1.5rem; --fs-xl:2.1rem; --fs-xxl:clamp(2.6rem,6vw,4.4rem); --lh:1.65; /* shape + depth */ --radius:16px; --card-radius:var(--radius); --tip-radius:14px; --card-border:1px solid var(--border); --card-tilt:0deg; --shadow:0 6px 24px rgba(35,48,57,.10); --shadow-lg:0 14px 44px rgba(35,48,57,.16); --maxw:1120px; --space:clamp(1rem,3vw,2rem); --section-gap:clamp(2rem,5vw,3.5rem); /* surfaces / extras */ --page-bg:var(--bg); --banner-bg:linear-gradient(100deg, var(--slate), var(--slate-lt)); --hero-filter:saturate(1.18) contrast(1.08) brightness(1.03); --hero-scrim:linear-gradient(0deg, rgba(26,36,43,.82) 0%, rgba(26,36,43,.30) 45%, rgba(58,90,110,.18) 100%); --hero-eyebrow:#ffe9c8; --orb:radial-gradient(circle at 35% 30%, var(--moss), var(--slate)); } /* ---------- MEDITERRANEAN SUN ---------- */ :root[data-theme="mediterranean"]{ --bg:#fbf2e2; --surface:#fffaf1; --text:#3b2a1d; --text-soft:#7a6450; --border:#ecd7ba; --brand:#c0612c; --accent:#2f7da0; --accent-dk:#236586; --copper:#c0612c; --moss-dk:#8a9a5b; --font-head:"Playfair Display", Georgia, serif; --font-body:"Mulish", system-ui, sans-serif; --head-weight:900; --head-spacing:.2px; --radius:8px; --card-radius:20px 20px 6px 6px; --tip-radius:16px 16px 6px 6px; --shadow:0 8px 26px rgba(120,70,30,.12); --shadow-lg:0 18px 48px rgba(120,70,30,.20); --page-bg:radial-gradient(rgba(192,97,44,.05) 1.2px, transparent 1.2px) 0 0/22px 22px, var(--bg); --banner-bg:linear-gradient(100deg,#2f7da0,#46a0c4); --hero-filter:saturate(1.12) contrast(1.06) brightness(1.03); --hero-scrim:linear-gradient(0deg, rgba(60,30,10,.78) 0%, rgba(60,30,10,.26) 45%, rgba(47,125,160,.18) 100%); --hero-eyebrow:#ffe1b0; --orb:radial-gradient(circle at 35% 30%, #f4c873, #c0612c); } /* ---------- BOTANICAL GARDEN ---------- */ :root[data-theme="botanical"]{ --bg:#eef5e4; --surface:#fbfdf5; --text:#26331c; --text-soft:#566b48; --border:#d6e6c4; --brand:#4f7a35; --accent:#6f9e44; --accent-dk:#4f7a35; --copper:#c98a3a; --moss-dk:#5b8a3f; --font-head:"Quicksand", system-ui, sans-serif; --font-body:"Quicksand", system-ui, sans-serif; --head-weight:700; --head-spacing:.3px; --radius:28px; --card-radius:28px; --tip-radius:24px; --shadow:0 10px 30px rgba(60,100,40,.12); --shadow-lg:0 18px 48px rgba(60,100,40,.20); --space:clamp(1.2rem,3.4vw,2.4rem); --section-gap:clamp(2.6rem,6vw,4.2rem); --page-bg:linear-gradient(180deg,#eef5e4,#e4f0d6); --banner-bg:linear-gradient(100deg,#4f7a35,#7aa84e); --hero-filter:saturate(1.12) contrast(1.05) brightness(1.04); --hero-scrim:linear-gradient(0deg, rgba(25,45,15,.78) 0%, rgba(25,45,15,.24) 48%, rgba(79,122,53,.16) 100%); --hero-eyebrow:#dff0bf; --orb:radial-gradient(circle at 35% 30%, #b7df87, #4f7a35); } /* ---------- VINTAGE VOYAGER (postcard) ---------- */ :root[data-theme="vintage"]{ --bg:#efe5d0; --surface:#f8f1df; --text:#3a2f24; --text-soft:#6e5d49; --border:#cdbfa3; --brand:#9c3b2e; --accent:#b5763f; --accent-dk:#8a5a2e; --copper:#9c3b2e; --moss-dk:#7d7a4a; --font-head:"Oswald", "Arial Narrow", sans-serif; --font-body:"Bitter", Georgia, serif; --head-weight:600; --head-spacing:1.5px; --head-transform:uppercase; --radius:4px; --card-radius:6px; --tip-radius:6px; --card-border:2px dashed var(--accent-dk); --card-tilt:-.4deg; --shadow:5px 5px 0 rgba(58,47,36,.12); --shadow-lg:8px 8px 0 rgba(58,47,36,.18); --page-bg: repeating-linear-gradient(0deg, rgba(120,90,50,.05) 0 1px, transparent 1px 26px), repeating-linear-gradient(90deg, rgba(120,90,50,.05) 0 1px, transparent 1px 26px), var(--bg); --banner-bg:linear-gradient(100deg,#9c3b2e,#b5763f); --hero-filter:sepia(.22) saturate(.95) contrast(1.05) brightness(1.02); --hero-scrim:linear-gradient(0deg, rgba(50,35,20,.80) 0%, rgba(50,35,20,.30) 50%, rgba(120,80,40,.16) 100%); --hero-eyebrow:#f0d49a; --orb:radial-gradient(circle at 35% 30%, #e0b870, #9c3b2e); } /* ---------- EVENING CALM (dark) ---------- */ :root[data-theme="evening"]{ --bg:#141d26; --surface:#1e2a36; --text:#eef3f7; --text-soft:#aebcc8; --border:#314150; --brand:#f0b66a; --accent:#f0b66a; --accent-dk:#d99847; --copper:#f0b66a; --moss-dk:#7fa6c0; --font-head:"Nunito", system-ui, sans-serif; --font-body:"Nunito", system-ui, sans-serif; --head-weight:800; --radius:18px; --card-radius:18px; --tip-radius:16px; --shadow:0 8px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(240,182,106,.04); --shadow-lg:0 18px 50px rgba(0,0,0,.55), 0 0 24px rgba(240,182,106,.10); --page-bg:radial-gradient(120% 80% at 50% -10%, #1d2b3a, #121922); --banner-bg:linear-gradient(100deg,#243748,#2f4a60); --hero-filter:brightness(.85) contrast(1.10) saturate(1.10); --hero-scrim:linear-gradient(0deg, rgba(8,12,18,.90) 0%, rgba(8,12,18,.45) 48%, rgba(20,29,38,.30) 100%); --hero-eyebrow:#f0b66a; --orb:radial-gradient(circle at 35% 30%, #f0b66a, #243748); } /* ---------- GHIBLI / STORYBOOK ELDERS ---------- */ :root[data-theme="ghibli"]{ --bg:#dceff5; --surface:#fffdf4; --text:#33403a; --text-soft:#5d6b62; --border:#cbe6dd; --brand:#3f7a6a; --accent:#e08a45; --accent-dk:#bf6a2a; --copper:#e08a45; --moss-dk:#5aa183; --font-head:"Baloo 2", system-ui, sans-serif; --font-body:"Nunito", system-ui, sans-serif; --head-weight:700; --head-spacing:.2px; --radius:26px; --card-radius:26px; --tip-radius:22px; --shadow:0 10px 28px rgba(63,122,106,.16); --shadow-lg:0 20px 50px rgba(63,122,106,.24); --space:clamp(1.1rem,3.2vw,2.2rem); --page-bg: radial-gradient(closest-side, #ffffff 60%, transparent) 12% 30%/180px 70px no-repeat, radial-gradient(closest-side, #ffffff 60%, transparent) 78% 22%/220px 80px no-repeat, radial-gradient(closest-side, #ffffff 55%, transparent) 50% 12%/150px 56px no-repeat, linear-gradient(180deg,#cfeaf3 0%, #e7f4ee 55%, #d7eecb 100%); --banner-bg:linear-gradient(100deg,#3f7a6a,#5aa183); --hero-filter:saturate(1.15) contrast(.98) brightness(1.05); --hero-scrim:linear-gradient(0deg, rgba(30,55,48,.74) 0%, rgba(30,55,48,.22) 50%, rgba(120,180,200,.16) 100%); --hero-eyebrow:#ffe1bc; --orb:radial-gradient(circle at 35% 30%, #bfe7d6, #3f7a6a); } /* ============================================================ STRUCTURE (driven by tokens above) ============================================================ */ * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; font-family:var(--font-body); font-size:var(--fs-base); line-height:var(--lh); color:var(--text); background:var(--page-bg); background-attachment:fixed; -webkit-font-smoothing:antialiased; } img { max-width:100%; display:block; } a { color:var(--accent-dk); } a:focus-visible, button:focus-visible, select:focus-visible, .tab:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; } h1,h2,h3 { line-height:1.2; color:var(--text); font-family:var(--font-head); font-weight:var(--head-weight); letter-spacing:var(--head-spacing); font-style:var(--head-style); } h2 { font-size:var(--fs-xl); margin-top:0; text-transform:var(--head-transform); } h3 { font-size:var(--fs-lg); } .wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--space); } .skip-link { position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:.8rem 1.2rem; z-index:100; border-radius:0 0 10px 0; font-weight:700; } .skip-link:focus { left:0; } /* ---------- Header / nav ---------- */ .site-header { position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow); } .nav { display:flex; align-items:center; gap:1rem; max-width:var(--maxw); margin:0 auto; padding:.55rem var(--space); flex-wrap:wrap; } .brand { display:flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-size:1.4rem; font-weight:var(--head-weight); color:var(--brand); text-decoration:none; letter-spacing:var(--head-spacing); } .brand .dot { width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--moss), var(--moss-dk)); } .tabs { display:flex; gap:.35rem; flex-wrap:wrap; margin-left:auto; align-items:center; } .tab { display:inline-block; padding:.7rem 1rem; min-height:48px; line-height:1.9; border-radius:12px; text-decoration:none; color:var(--text-soft); font-weight:600; font-size:1.05rem; white-space:nowrap; } .tab:hover { background:var(--bg); color:var(--text); } .tab[aria-current="page"] { background:var(--brand); color:#fff; } /* theme picker */ .theme-pick { display:flex; align-items:center; gap:.4rem; } .theme-pick__lbl { font-size:1rem; font-weight:700; color:var(--text-soft); } #themeSelect { min-height:48px; padding:.4rem .7rem; font-size:1.02rem; font-family:var(--font-body); color:var(--text); background:var(--bg); border:2px solid var(--border); border-radius:12px; cursor:pointer; font-weight:600; } #themeSelect:hover { border-color:var(--accent); } /* ---------- Research banner ---------- */ .banner { background:var(--banner-bg); color:#fff; } .banner-inner { max-width:var(--maxw); margin:0 auto; padding:.9rem var(--space); display:flex; align-items:center; gap:1rem; } .banner .badge { flex:none; font-size:.85rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,255,255,.18); padding:.35rem .7rem; border-radius:999px; } .banner .msg { flex:1; font-size:1.05rem; } .banner .msg a { color:#fff; text-decoration:underline; } .banner .msg .meta { opacity:.85; font-size:.92rem; } .banner .close { flex:none; background:transparent; border:0; color:#fff; font-size:1.6rem; cursor:pointer; min-width:48px; min-height:48px; border-radius:10px; } .banner .close:hover { background:rgba(255,255,255,.15); } /* ---------- Hero ---------- */ .hero { position:relative; overflow:hidden; min-height:clamp(420px,70vh,720px); display:flex; align-items:flex-end; isolation:isolate; } .hero__img, .hero__bloom { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; } .hero__img { filter:var(--hero-filter); animation:kenburns 32s ease-in-out infinite alternate; } .hero__bloom { z-index:-2; filter:blur(22px) saturate(1.5) brightness(1.15); opacity:.35; mix-blend-mode:screen; animation:kenburns 32s ease-in-out infinite alternate; } .hero__grade { position:absolute; inset:0; z-index:-1; background: radial-gradient(120% 90% at 50% 18%, rgba(255,233,200,.18), transparent 55%), var(--hero-scrim), radial-gradient(130% 130% at 50% 50%, transparent 55%, rgba(20,28,33,.55) 100%); } .hero__content { position:relative; z-index:1; color:#fff; padding:2.4rem var(--space) 3rem; width:100%; max-width:var(--maxw); margin:0 auto; text-shadow:0 2px 14px rgba(0,0,0,.45); } .hero__eyebrow { font-size:1.05rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--hero-eyebrow); margin:0 0 .4rem; } .hero__title { font-family:var(--font-head); font-size:var(--fs-xxl); margin:0 0 .5rem; font-weight:var(--head-weight); text-transform:var(--head-transform); } .hero__tagline { font-size:var(--fs-lg); max-width:38ch; margin:0; font-weight:500; } @keyframes kenburns { from { transform:scale(1) translate(0,0); } to { transform:scale(1.09) translate(-1.5%,-1.5%); } } @media (prefers-reduced-motion: reduce) { .hero__img,.hero__bloom { animation:none; } html { scroll-behavior:auto; } } /* ---------- Layout / sections ---------- */ main { padding:clamp(1.5rem,4vw,3rem) 0 4rem; position:relative; z-index:1; } .section { margin-bottom:var(--section-gap); } .section__head { margin-bottom:1.2rem; } .section__head p { color:var(--text-soft); margin:.3rem 0 0; max-width:60ch; } .grid { display:grid; gap:1.2rem; } .grid--2 { grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); } .grid--3 { grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); } .card { background:var(--surface); border:var(--card-border); border-radius:var(--card-radius); padding:1.4rem; box-shadow:var(--shadow); } .card h3 { margin-top:0; color:var(--brand); } .card--accent { border-left:6px solid var(--accent); } .card--moss { border-left:6px solid var(--moss-dk); } .link-card { display:flex; flex-direction:column; gap:.4rem; text-decoration:none; color:var(--text); transition:transform .15s, box-shadow .15s; } .link-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); } .link-card .emoji { font-size:2.4rem; } .link-card .go { color:var(--accent-dk); font-weight:700; margin-top:auto; } .tips { list-style:none; padding:0; margin:0; display:grid; gap:1rem; } .tips li { background:var(--surface); border:var(--card-border); border-radius:var(--tip-radius); padding:1.1rem 1.2rem; display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start; } .tips li .ic { font-size:1.7rem; line-height:1; } .tips li strong { display:block; font-size:1.12rem; margin-bottom:.2rem; } .tips li .src { font-size:.92rem; color:var(--text-soft); } .tips li .src a { color:var(--accent-dk); } /* ---------- Weather ---------- */ .weather-grid { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); } .weather-card { background:var(--surface); border:var(--card-border); border-radius:var(--card-radius); padding:1.4rem; box-shadow:var(--shadow); display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center; } .weather-card .place { grid-column:1/-1; display:flex; justify-content:space-between; align-items:baseline; } .weather-card .place h3 { margin:0; } .weather-card .place .sub { color:var(--text-soft); font-size:.95rem; } .weather-card .ico { font-size:3.4rem; line-height:1; } .weather-card .temp { font-size:2.8rem; font-weight:800; color:var(--brand); font-family:var(--font-head); } .weather-card .cond { color:var(--text-soft); } .weather-card .extra { grid-column:1/-1; display:flex; gap:1.4rem; flex-wrap:wrap; color:var(--text-soft); font-size:1rem; } .weather-card .extra b { color:var(--text); } /* ---------- Habit checklist ---------- */ .habits { display:grid; gap:.7rem; } .habit { display:flex; align-items:center; gap:.9rem; padding:.7rem 1rem; min-height:56px; background:var(--surface); border:2px solid var(--border); border-radius:var(--tip-radius); cursor:pointer; font-size:1.1rem; } .habit:hover { border-color:var(--moss-dk); } .habit input { width:28px; height:28px; accent-color:var(--moss-dk); cursor:pointer; } .habit.done { background:color-mix(in srgb, var(--moss-dk) 20%, var(--surface)); border-color:var(--moss-dk); } .habit.done .label { text-decoration:line-through; opacity:.75; } .streak { margin-top:.6rem; font-size:1.05rem; color:var(--text-soft); } .streak b { color:var(--accent-dk); font-size:1.3rem; } /* ---------- Quote ---------- */ .quote { font-size:1.35rem; font-style:italic; line-height:1.5; border-left:6px solid var(--moss-dk); padding:.4rem 0 .4rem 1.2rem; margin:0; color:var(--text); } .quote .who { display:block; font-style:normal; font-size:1rem; color:var(--text-soft); margin-top:.5rem; } /* ---------- Breathing widget ---------- */ .breath { text-align:center; } .breath .orb { width:150px; height:150px; border-radius:50%; margin:1.2rem auto; background:var(--orb); box-shadow:var(--shadow-lg); animation:breathe 11s ease-in-out infinite; } .breath .phase { font-size:1.4rem; font-weight:700; color:var(--brand); min-height:1.6em; font-family:var(--font-head); } @keyframes breathe { 0%,100%{transform:scale(.7);} 18%{transform:scale(1.15);} 54%{transform:scale(1.15);} 82%{transform:scale(.7);} } @media (prefers-reduced-motion: reduce) { .breath .orb { animation:none; } } /* ---------- Footer ---------- */ .site-footer { background:var(--surface); border-top:1px solid var(--border); padding:2rem 0; color:var(--text-soft); text-align:center; font-size:1rem; position:relative; z-index:1; } .site-footer .disclaimer { max-width:70ch; margin:.6rem auto 0; font-size:.92rem; opacity:.85; } .muted { color:var(--text-soft); } .center { text-align:center; } .adventure { background:linear-gradient(110deg, color-mix(in srgb, var(--copper) 16%, var(--surface)), var(--surface)); border:1px solid var(--border); border-left:6px solid var(--copper); } /* ============================================================ THEME-SCOPED STRUCTURAL TOUCHES (the "feeling") ============================================================ */ /* Mediterranean — ornamental underline under section heads */ :root[data-theme="mediterranean"] .section__head h2 { position:relative; padding-bottom:.45rem; } :root[data-theme="mediterranean"] .section__head h2::after { content:""; position:absolute; left:0; bottom:0; width:78px; height:4px; border-radius:4px; background:linear-gradient(90deg, var(--brand), var(--accent)); } :root[data-theme="mediterranean"] .card { border-top:3px solid color-mix(in srgb, var(--accent) 40%, transparent); } /* Vintage — tilt cards like pinned postcards, stamp-style badge & corners */ :root[data-theme="vintage"] .card, :root[data-theme="vintage"] .tips li { transform:rotate(var(--card-tilt)); } :root[data-theme="vintage"] .card:nth-child(even), :root[data-theme="vintage"] .tips li:nth-child(even) { --card-tilt:.5deg; } :root[data-theme="vintage"] .banner .badge { border:2px dashed rgba(255,255,255,.7); border-radius:4px; } :root[data-theme="vintage"] .hero__content { text-shadow:0 2px 10px rgba(0,0,0,.6); } /* Botanical — leafy bullet feel on tips */ :root[data-theme="botanical"] .tips li .ic { filter:drop-shadow(0 2px 2px rgba(60,100,40,.2)); } /* Ghibli — storybook backdrop + decorative caricature elders in corners. Hidden on small screens so they never crowd the content. */ :root[data-theme="ghibli"] body::before, :root[data-theme="ghibli"] body::after { content:""; position:fixed; bottom:0; width:190px; height:300px; z-index:0; background-repeat:no-repeat; background-size:contain; background-position:bottom; pointer-events:none; opacity:.95; filter:drop-shadow(0 6px 10px rgba(40,70,60,.18)); } :root[data-theme="ghibli"] body::before { left:0; background-image:url("../assets/ghibli-grandpa.svg"); } :root[data-theme="ghibli"] body::after { right:0; background-image:url("../assets/ghibli-grandma.svg"); } @media (max-width:1300px) { :root[data-theme="ghibli"] body::before, :root[data-theme="ghibli"] body::after { display:none; } } :root[data-theme="ghibli"] .card { border:2px solid var(--border); }