/* Shared styling for every page of the trip site: index.html, the day pages in days/, and the reference pages. Same bones as the study pages (Cinzel headings, Nunito body, cards with a coloured rail, pills and notes) on a light, sunny ground instead of navy. Each park has its own colour. A class on or on a card picks it: p-mk Magic Kingdom, p-ep EPCOT, p-hs Hollywood Studios, p-ak Animal Kingdom, p-ds Disney Springs, p-tr travel days. Everything inside inherits --accent. */ :root{ --paper:#FFFBF2; --card:#FFFFFF; --ink:#1F2A56; --text:#2B3358; --muted:#6C7398; --line:#EDE6D6; --line-2:#DCD3BE; --sun:#FFC53D; --sun-ink:#A85F00; --sun-soft:#FFF1C2; --sky:#3D8BFF; --sky-ink:#1D5FD0; --sky-soft:#DDEBFF; --mint:#18B8A6; --mint-ink:#0D7F73; --mint-soft:#CFF7F0; --coral:#FF5A7A; --coral-ink:#C6244A; --coral-soft:#FFE1E8; --leaf:#3DBE5F; --leaf-ink:#1E7F3B; --leaf-soft:#D8F5E0; --tangerine:#FF8A2A; --tangerine-ink:#C2530A; --tangerine-soft:#FFE8D3; --grape:#9B6BFF; --grape-ink:#6A3BD6; --grape-soft:#EBE3FF; --accent:var(--sun); --accent-ink:var(--sun-ink); --accent-soft:var(--sun-soft); --accent-dim:rgba(255,197,61,.55); --accent-glow:rgba(255,197,61,.28); } .p-mk{--accent:var(--sky);--accent-ink:var(--sky-ink);--accent-soft:var(--sky-soft);--accent-dim:rgba(61,139,255,.5);--accent-glow:rgba(61,139,255,.22);} .p-ep{--accent:var(--mint);--accent-ink:var(--mint-ink);--accent-soft:var(--mint-soft);--accent-dim:rgba(24,184,166,.5);--accent-glow:rgba(24,184,166,.22);} .p-hs{--accent:var(--coral);--accent-ink:var(--coral-ink);--accent-soft:var(--coral-soft);--accent-dim:rgba(255,90,122,.5);--accent-glow:rgba(255,90,122,.22);} .p-ak{--accent:var(--leaf);--accent-ink:var(--leaf-ink);--accent-soft:var(--leaf-soft);--accent-dim:rgba(61,190,95,.5);--accent-glow:rgba(61,190,95,.22);} .p-ds{--accent:var(--tangerine);--accent-ink:var(--tangerine-ink);--accent-soft:var(--tangerine-soft);--accent-dim:rgba(255,138,42,.5);--accent-glow:rgba(255,138,42,.22);} .p-tr{--accent:var(--grape);--accent-ink:var(--grape-ink);--accent-soft:var(--grape-soft);--accent-dim:rgba(155,107,255,.5);--accent-glow:rgba(155,107,255,.22);} .p-sun{--accent:var(--sun);--accent-ink:var(--sun-ink);--accent-soft:var(--sun-soft);--accent-dim:rgba(255,197,61,.55);--accent-glow:rgba(255,197,61,.28);} *{box-sizing:border-box;} html{background:var(--paper);} body{ margin:0;min-height:100vh; background-color:var(--paper); background-image: radial-gradient(120% 60% at 50% 0%, #FFE9A6 0%, rgba(255,233,166,0) 62%), radial-gradient(70% 40% at 100% 100%, rgba(61,139,255,.13) 0%, rgba(61,139,255,0) 70%); background-repeat:no-repeat;background-size:100% 720px,100% 100%; color:var(--text); font-family:Nunito,"Trebuchet MS",system-ui,sans-serif; font-size:17px;line-height:1.5;-webkit-text-size-adjust:100%; } .wrap{max-width:760px;margin:0 auto;padding:22px 16px 60px;} a{color:var(--accent-ink);} /* ---------- back link ---------- */ a.back{ display:inline-flex;align-items:center;gap:7px;text-decoration:none; color:var(--muted);font-size:14.5px;font-weight:800; letter-spacing:.05em;padding:9px 15px 9px 12px; border:2px solid var(--line-2);border-radius:11px;background:rgba(255,255,255,.7); transition:border-color .18s,color .18s; } a.back:hover{border-color:var(--accent);color:var(--accent-ink);} a.back:focus-visible{outline:3px solid var(--accent);outline-offset:2px;} /* ---------- masthead ---------- */ header.top{text-align:center;padding:16px 0 4px;} .sundisc{ width:68px;height:68px;margin:0 auto 14px;border-radius:50%; background:radial-gradient(circle at 50% 45%, #FFF7CF 0%, #FFD449 36%, #FFA41B 60%, #FF5A7A 61%, #FF8A2A 100%); box-shadow:0 0 0 4px #fff,0 0 0 6px var(--sun),0 12px 30px rgba(255,164,27,.38); position:relative; } .sundisc::after{content:"";position:absolute;inset:12px;border-radius:50%;border:2px solid rgba(255,255,255,.55);} .daycrest{ width:68px;height:68px;margin:0 auto 14px;border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center; color:var(--accent-ink);background:var(--accent-soft); border:2.5px solid var(--accent);box-shadow:0 0 0 4px #fff,0 10px 26px var(--accent-glow); } .daycrest .n{font-family:Cinzel,Georgia,serif;font-weight:700;font-size:27px;line-height:1;} .daycrest .w{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:3px;font-weight:800;} h1{ font-family:Cinzel,Georgia,serif;font-weight:700; font-size:clamp(26px,7vw,40px);letter-spacing:.05em; margin:0;color:var(--ink);line-height:1.15;text-wrap:balance; } h1.lit{color:var(--accent-ink);} .kicker{ margin:10px 0 0;color:var(--muted);font-size:13.5px; letter-spacing:.14em;text-transform:uppercase;font-weight:800; } .countdown{ display:inline-block;margin-top:14px;padding:7px 16px;border-radius:20px; background:var(--sun);color:#3A2600;font-weight:800;font-size:14.5px; letter-spacing:.04em;box-shadow:0 6px 18px rgba(255,197,61,.4); } .countdown.during{background:var(--leaf);color:#0F3B1D;box-shadow:0 6px 18px rgba(61,190,95,.4);} .countdown.after{background:var(--line);color:var(--muted);box-shadow:none;} /* ---------- section heads ---------- */ .secthead{margin:30px 0 0;} .secthead h2{ font-family:Cinzel,Georgia,serif;font-weight:700;font-size:21px; letter-spacing:.05em;color:var(--ink);margin:0; } .secthead p{margin:5px 0 0;color:var(--muted);font-size:14.5px;} /* ---------- the trip card (index) ---------- */ .basics{ margin-top:26px;background:var(--card);border:2px solid var(--line-2);border-radius:18px; padding:20px 20px 18px;box-shadow:0 8px 24px rgba(90,60,0,.06); } .basics h2{ font-family:Cinzel,Georgia,serif;font-size:15px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 12px; } .facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;} @media (max-width:560px){.facts{grid-template-columns:1fr;}} .fact{border:1.5px solid var(--line);border-radius:12px;padding:10px 13px;background:#FFFDF8;} .fact .k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);} .fact .v{display:block;margin-top:3px;font-weight:700;color:var(--ink);font-size:15.5px;line-height:1.4;} .fact .v small{display:block;font-weight:600;color:var(--muted);font-size:13.5px;} .fact.wide{grid-column:1 / -1;} /* ---------- day rows (index) ---------- */ .days{display:flex;flex-direction:column;gap:12px;margin-top:16px;} a.day{ display:flex;align-items:center;gap:16px;text-decoration:none;color:inherit; background:var(--card);border:2px solid var(--accent-dim);border-left:7px solid var(--accent); border-radius:16px;padding:15px 18px 15px 16px; box-shadow:0 6px 20px rgba(90,60,0,.05); transition:border-color .18s,transform .14s,box-shadow .18s; } a.day:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 30px var(--accent-glow);} a.day:focus-visible{outline:3px solid var(--accent);outline-offset:3px;} a.day .crest{ flex:none;width:56px;height:56px;border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center; color:var(--accent-ink);background:var(--accent-soft);border:2px solid var(--accent); } a.day .crest .n{font-family:Cinzel,Georgia,serif;font-weight:700;font-size:22px;line-height:1;} a.day .crest .w{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;margin-top:2px;font-weight:800;} a.day .body{flex:1;min-width:0;} a.day .when{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink); } a.day .name{ font-family:Cinzel,Georgia,serif;font-size:clamp(18px,4.6vw,22px);font-weight:700; color:var(--ink);line-height:1.2;display:block;margin-top:3px; } a.day .sum{display:block;margin-top:5px;color:var(--muted);font-size:14.5px;line-height:1.45;} a.day .go{margin-left:auto;color:var(--accent-ink);font-size:22px;flex:none;} a.day.past{opacity:.62;} a.day.today{box-shadow:0 10px 30px var(--accent-glow);border-color:var(--accent);} .badge{ display:inline-block;border-radius:20px;padding:2px 10px; font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; border:1.5px solid var(--line-2);color:var(--muted);background:#fff;white-space:nowrap; } .badge.today{border-color:var(--sun);background:var(--sun);color:#3A2600;} .badge.soon{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft);} .badge.past{border-color:var(--line);color:var(--muted);} /* ---------- reference tiles (index) ---------- */ .subjects{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;} @media (max-width:520px){.subjects{grid-template-columns:1fr;}} .subject{ display:block;text-decoration:none;color:inherit; background:var(--card);border:2px solid var(--accent-dim);border-radius:16px;padding:18px 18px 16px; box-shadow:0 6px 20px rgba(90,60,0,.05); transition:border-color .18s,transform .14s,box-shadow .18s; } a.subject:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 26px var(--accent-glow);} a.subject:focus-visible{outline:3px solid var(--accent);outline-offset:3px;} .subject .icon{ width:44px;height:44px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:var(--accent-soft);border:1.5px solid var(--accent); color:var(--accent-ink);margin-bottom:12px; } .subject .icon svg{width:24px;height:24px;} .subject .name{ font-family:Cinzel,Georgia,serif;font-size:19px;font-weight:700; color:var(--ink);display:block;line-height:1.2; } .subject .count{display:block;margin-top:6px;color:var(--muted);font-size:14.5px;font-weight:600;} .subject .go{display:block;margin-top:12px;color:var(--accent-ink);font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;} /* The lit tile at the top: whichever day matters right now. */ .subject.now{ grid-column:1 / -1;position:relative;padding-left:26px; border-color:var(--accent); background:linear-gradient(90deg,var(--accent-soft) 0%,#fff 60%); box-shadow:0 10px 30px var(--accent-glow); } .subject.now::before{ content:"";position:absolute;left:0;top:14px;bottom:14px;width:6px; border-radius:6px;background:var(--accent); } /* ---------- day page panels ---------- */ .panel{ margin-top:14px;background:var(--card);border:2px solid var(--line-2);border-radius:16px; padding:18px 18px 16px;box-shadow:0 6px 20px rgba(90,60,0,.05); } .panel.accent{border-color:var(--accent-dim);} .panel.alert{border-color:var(--coral);background:linear-gradient(180deg,#FFF3F5 0%,#fff 100%);} h2.sec{ font-family:Cinzel,Georgia,serif;font-size:15px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink); margin:0 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap; } h2.sec .when{font-family:Nunito,sans-serif;font-size:12.5px;letter-spacing:.06em;color:var(--muted);text-transform:none;font-weight:800;} .panel.alert h2.sec{color:var(--coral-ink);} .lead-in{color:var(--muted);font-size:15px;margin:0 0 12px;line-height:1.5;} .lead-in b{color:var(--ink);} .pill{ display:inline-block;border-radius:20px;padding:3px 10px; font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; background:var(--accent-soft);color:var(--accent-ink);white-space:nowrap; } .pill.ok{background:var(--leaf-soft);color:var(--leaf-ink);} .pill.best{background:var(--sun);color:#3A2600;} .pill.warn{background:var(--coral-soft);color:var(--coral-ink);} .pill.quiet{background:var(--line);color:var(--muted);} /* facts strip on a day page */ .strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;} .strip .fact{flex:1 1 150px;} /* flights */ .flight{display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .flight .leg{flex:1 1 130px;} .flight .code{font-family:Cinzel,Georgia,serif;font-weight:700;font-size:26px;color:var(--ink);line-height:1;} .flight .city{color:var(--muted);font-size:13.5px;margin-top:4px;font-weight:700;} .flight .time{font-weight:800;color:var(--accent-ink);font-size:18px;margin-top:4px;} .flight .arrow{color:var(--accent);font-size:26px;flex:none;} .flight .no{flex:1 1 100%;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);} .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;} .chips span{ font-size:13px;font-weight:800;padding:6px 12px;border-radius:20px; background:var(--accent-soft);color:var(--accent-ink); } .chips.plain span{background:#FFFDF8;border:1.5px solid var(--line-2);color:var(--text);} /* timeline */ .steps{list-style:none;margin:0;padding:0;} .steps li{ display:flex;gap:14px;align-items:flex-start;position:relative;padding:0 0 12px 0; } .steps li::before{ content:"";position:absolute;left:7px;top:22px;bottom:-2px;width:2px;background:var(--line); } .steps li:last-child::before{display:none;} .steps .dot{ flex:none;width:16px;height:16px;border-radius:50%;margin-top:5px; background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft); } .steps .t{flex:none;width:96px;font-weight:800;color:var(--accent-ink);font-variant-numeric:tabular-nums;} .steps .x{flex:1;color:var(--text);} @media (max-width:480px){.steps li{flex-wrap:wrap;}.steps .t{width:auto;}.steps .x{flex:1 1 100%;padding-left:30px;}} .panel.alert .steps .dot{background:var(--coral);box-shadow:0 0 0 3px var(--coral-soft);} .panel.alert .steps .t{color:var(--coral-ink);} /* bullet lists */ ul.bul{list-style:none;margin:0;padding:0;} ul.bul li{position:relative;padding-left:22px;margin:0 0 8px;} ul.bul li::before{ content:"";position:absolute;left:2px;top:9px;width:9px;height:9px;border-radius:50%; background:var(--accent); } ul.bul li:last-child{margin-bottom:0;} ul.bul ul{list-style:none;margin:6px 0 0;padding:0;} ul.bul ul li{padding-left:18px;margin:0 0 5px;font-size:15.5px;color:var(--text);} ul.bul ul li::before{width:6px;height:6px;top:10px;background:var(--accent-dim);} ul.bul li .pill{margin-right:6px;vertical-align:1px;} /* meals and reservations */ .meal{border:2px solid var(--accent-dim);border-radius:14px;padding:14px 15px 13px;background:#FFFDF8;} .meal + .meal{margin-top:10px;} .meal .head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;} .meal .name{font-family:Cinzel,Georgia,serif;font-size:20px;font-weight:700;color:var(--ink);line-height:1.25;} .meal .where{color:var(--muted);font-size:14.5px;font-weight:700;margin-top:2px;} .resrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px;} .res{ border:1.5px solid var(--line-2);border-radius:11px;padding:7px 12px;background:#fff; font-size:14px;font-weight:700;color:var(--text); } .res b{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);} .res .big{font-size:19px;font-weight:800;color:var(--accent-ink);} .res .conf{font-size:16px;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--ink);} .meal .notes{margin:11px 0 0;padding:0;list-style:none;} .meal .notes li{position:relative;padding-left:16px;margin:0 0 6px;font-size:15px;color:var(--text);line-height:1.5;} .meal .notes li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:50%;background:var(--accent);} .parts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;} @media (max-width:520px){.parts{grid-template-columns:1fr;}} .part{border:1.5px dashed var(--accent-dim);border-radius:11px;padding:9px 12px;font-size:14.5px;} .part b{display:block;color:var(--ink);} .part .conf{letter-spacing:.06em;font-variant-numeric:tabular-nums;font-weight:800;} .part .who{color:var(--muted);font-weight:700;} /* shows */ .show{display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .show .name{font-family:Cinzel,Georgia,serif;font-size:19px;font-weight:700;color:var(--ink);flex:1 1 200px;} .show .time{font-size:24px;font-weight:800;color:var(--accent-ink);font-variant-numeric:tabular-nums;} /* lightning lane rows */ .ll{list-style:none;margin:0;padding:0;} .ll li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1.5px solid var(--line);} .ll li:last-child{border-bottom:0;} .ll .a{color:var(--text);font-weight:700;} .ll .b{color:var(--muted);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;} .ll li.total{border-top:2px solid var(--accent);margin-top:4px;padding-top:12px;} .ll li.total .a{color:var(--ink);font-family:Cinzel,Georgia,serif;font-size:15px;letter-spacing:.08em;text-transform:uppercase;} .ll li.total .b{color:var(--accent-ink);font-size:20px;font-weight:800;} /* tables (reference pages) */ table.grid{width:100%;border-collapse:collapse;font-size:15px;} table.grid th{ text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);padding:6px 8px;border-bottom:2px solid var(--line-2); } table.grid td{padding:9px 8px;border-bottom:1.5px solid var(--line);vertical-align:top;color:var(--text);} table.grid tr:last-child td{border-bottom:0;} table.grid td.num,table.grid th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;} table.grid td.day{white-space:nowrap;font-weight:800;color:var(--ink);} table.grid tr.total td{border-top:2px solid var(--accent);font-weight:800;color:var(--ink);} table.grid tr.total td.num{color:var(--accent-ink);font-size:18px;} .tablewrap{overflow-x:auto;} /* rows that must read on a phone: a label block on the left, one value on the right */ .rows{list-style:none;margin:0;padding:0;} .rows li{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:1.5px solid var(--line);} .rows li:last-child{border-bottom:0;} .rows .l{flex:1 1 220px;min-width:0;} .rows .l b{display:block;color:var(--ink);font-size:15.5px;line-height:1.35;} .rows .l span{display:block;color:var(--muted);font-size:13.5px;font-weight:700;margin-top:2px;} .rows .r{flex:none;font-weight:800;color:var(--accent-ink);font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:.05em;white-space:nowrap;} .rows li.total{border-top:2px solid var(--accent);margin-top:4px;padding-top:12px;} .rows li.total .l b{font-family:Cinzel,Georgia,serif;font-size:15px;letter-spacing:.08em;text-transform:uppercase;} .rows li.total .r{font-size:22px;} /* remarks and notes */ .note{ margin-top:13px;padding:12px 15px;border-radius:11px; background:#FFFDF8;border:1.5px dashed var(--line-2); font-size:14.5px;line-height:1.5;color:var(--muted); } .note b{color:var(--ink);} .note.warn{border-style:solid;border-color:var(--coral);background:#FFF3F5;color:var(--coral-ink);} .note.warn b{color:var(--coral-ink);} .note.good{border-style:solid;border-color:var(--leaf);background:#F0FBF3;color:var(--leaf-ink);} .note.good b{color:var(--leaf-ink);} /* previous / next day */ .pager{display:flex;gap:10px;margin-top:26px;} .pager a{ flex:1;text-decoration:none;color:inherit;background:var(--card); border:2px solid var(--accent-dim);border-radius:14px;padding:13px 15px; transition:border-color .18s,transform .14s; } .pager a:hover{border-color:var(--accent);transform:translateY(-2px);} .pager a:focus-visible{outline:3px solid var(--accent);outline-offset:2px;} .pager a.next{text-align:right;} .pager a .l{display:block;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);} .pager a .n{display:block;font-family:Cinzel,Georgia,serif;font-weight:700;color:var(--accent-ink);font-size:16px;margin-top:3px;} .pager .spacer{flex:1;} footer{margin-top:40px;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.7;} @media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}} @media print{ body{background:#fff;color:#000;font-size:13px;} a.back,.pager,.countdown{display:none !important;} .panel,.meal,.basics,a.day,.subject{box-shadow:none;break-inside:avoid;} .wrap{max-width:none;padding:0;} } @media (max-width:480px){ table.grid{font-size:14px;} table.grid th,table.grid td{padding:8px 5px;} }