/* ========================================================================== SIBBRESTE — STYLES Design: a lit window at dusk. Deep slate, lamplight amber, quiet serifs. The page palette shifts with the visitor's local time of day. You should not need to edit this file to update content. ========================================================================== */ :root { --amber: #d9a05b; --amber-soft: #e8c294; --rule: rgba(217, 160, 91, 0.35); --max: 620px; --serif-display: "Fraunces", "Iowan Old Style", Georgia, serif; --serif-body: "Newsreader", "Iowan Old Style", Georgia, serif; } /* Time-of-day palettes (set on ) */ :root[data-time="night"] { --bg: #14182a; --bg2: #181d31; --ink: #e9e2d2; --ink-dim: #b3aa93; --card: rgba(233, 226, 210, 0.04); } :root[data-time="dusk"] { --bg: #232839; --bg2: #2a3046; --ink: #ede6d6; --ink-dim: #bcb29a; --card: rgba(237, 230, 214, 0.05); } :root[data-time="dawn"] { --bg: #38394d; --bg2: #46455c; --ink: #f2ead9; --ink-dim: #c8bda4; --card: rgba(242, 234, 217, 0.06); } :root[data-time="day"] { --bg: #3f4458; --bg2: #4a4f66; --ink: #f4edde; --ink-dim: #cdc3ab; --card: rgba(244, 237, 222, 0.06); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); color: var(--ink); font-family: var(--serif-body); font-size: 1.0625rem; line-height: 1.75; -webkit-font-smoothing: antialiased; min-height: 100vh; transition: background 2s ease, color 2s ease; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem 6rem; } a { color: var(--amber-soft); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--amber); } a:focus-visible, button:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; } /* ---------- Masthead ---------- */ header.masthead { text-align: center; padding: 3.5rem 0 2.25rem; } .masthead .greeting { font-family: var(--serif-body); font-style: italic; font-size: 0.95rem; color: var(--ink-dim); letter-spacing: 0.02em; } .masthead h1 { font-family: var(--serif-display); font-weight: 500; font-size: clamp(2.4rem, 8vw, 3.4rem); letter-spacing: 0.16em; text-transform: uppercase; margin: 0.5rem 0 0.4rem; } .masthead .issue-line { font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); } .masthead .tagline { margin-top: 1rem; font-style: italic; color: var(--amber-soft); font-size: 1rem; } /* ---------- Horizon divider: thin line, small sun/moon dot ---------- */ .horizon { display: flex; align-items: center; gap: 0; margin: 3rem 0; border: 0; } .horizon::before, .horizon::after { content: ""; flex: 1; height: 1px; background: var(--rule); } .horizon .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); margin: 0 12px; box-shadow: 0 0 12px rgba(217, 160, 91, 0.5); } /* ---------- Section labels ---------- */ .section-label { font-family: var(--serif-body); font-size: 0.78rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--amber); margin-bottom: 1.1rem; } section h2 { font-family: var(--serif-display); font-weight: 500; font-size: 1.7rem; line-height: 1.3; margin-bottom: 0.9rem; } section p { color: var(--ink); } section .meta { color: var(--ink-dim); font-size: 0.92rem; font-style: italic; margin-top: 0.8rem; } /* ---------- The View (window scenes) ---------- */ .window-frame { border: 1px solid var(--rule); border-radius: 14px 14px 4px 4px; padding: 10px; background: var(--card); } .scene { position: relative; height: 320px; border-radius: 8px 8px 2px 2px; overflow: hidden; } .view-caption { text-align: center; font-style: italic; font-size: 0.9rem; color: var(--ink-dim); margin-top: 0.9rem; } /* Scene 1: dawn over water */ .scene.dawn-water { background: linear-gradient(180deg, #2b3a5c 0%, #6b6a8e 34%, #c98e6b 58%, #e8b489 66%, #3c4a63 67%, #2d3950 100%); } .scene.dawn-water .sun { position: absolute; left: 50%; top: 56%; transform: translateX(-50%); width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle, #ffe3b0 0%, #f0b67a 60%, transparent 72%); animation: rise 60s linear infinite alternate; } .scene.dawn-water .shimmer { position: absolute; left: 0; right: 0; top: 67%; bottom: 0; background: repeating-linear-gradient(180deg, rgba(240,182,122,.22) 0 2px, transparent 2px 9px); animation: shimmer 7s ease-in-out infinite; } @keyframes rise { from { top: 58%; } to { top: 46%; } } @keyframes shimmer { 0%,100% { opacity: .5; } 50% { opacity: .9; } } /* Scene 2: rain on the window */ .scene.rain-window { background: linear-gradient(180deg, #3a4254 0%, #4a5268 45%, #39404f 100%); } .scene.rain-window .pane { position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 0 2px, transparent 3px), radial-gradient(circle at 70% 15%, rgba(255,255,255,.05) 0 2px, transparent 3px), radial-gradient(circle at 45% 60%, rgba(255,255,255,.06) 0 2px, transparent 3px), radial-gradient(circle at 85% 70%, rgba(255,255,255,.05) 0 2px, transparent 3px); } .scene.rain-window .streak { position: absolute; top: -20%; width: 1.5px; height: 38px; border-radius: 2px; background: linear-gradient(180deg, transparent, rgba(220,230,255,.5)); animation: fall linear infinite; } .scene.rain-window .streak:nth-child(2) { left: 12%; animation-duration: 3.6s; } .scene.rain-window .streak:nth-child(3) { left: 28%; animation-duration: 4.8s; animation-delay: 1.1s; } .scene.rain-window .streak:nth-child(4) { left: 47%; animation-duration: 3.1s; animation-delay: .4s; } .scene.rain-window .streak:nth-child(5) { left: 63%; animation-duration: 5.4s; animation-delay: 2s; } .scene.rain-window .streak:nth-child(6) { left: 79%; animation-duration: 4s; animation-delay: .9s; } .scene.rain-window .streak:nth-child(7) { left: 91%; animation-duration: 3.4s; animation-delay: 1.6s; } @keyframes fall { to { transform: translateY(420px); } } .scene.rain-window .lamp { position: absolute; right: 14%; bottom: 22%; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle, rgba(217,160,91,.55) 0%, rgba(217,160,91,.12) 55%, transparent 70%); filter: blur(2px); animation: flicker 6s ease-in-out infinite; } @keyframes flicker { 0%,100% { opacity: .85; } 50% { opacity: 1; } } /* Scene 3: golden field, late afternoon */ .scene.golden-field { background: linear-gradient(180deg, #7e90a8 0%, #c2a26e 52%, #a8854f 60%, #6f5a36 100%); } .scene.golden-field .grass { position: absolute; bottom: 0; left: 0; right: 0; height: 42%; background: repeating-linear-gradient(94deg, rgba(60,46,24,.35) 0 3px, transparent 3px 12px); animation: sway 9s ease-in-out infinite; transform-origin: bottom; } @keyframes sway { 0%,100% { transform: skewX(0deg); } 50% { transform: skewX(1.6deg); } } .scene.golden-field .lowsun { position: absolute; left: 22%; top: 38%; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle, #ffedc4 0%, #ecbd7d 55%, transparent 72%); } /* Scene 4: night sky */ .scene.night-sky { background: linear-gradient(180deg, #0d1226 0%, #18203c 70%, #232b48 100%); } .scene.night-sky .star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #ece5d3; animation: twinkle ease-in-out infinite; } @keyframes twinkle { 0%,100% { opacity: .25; } 50% { opacity: 1; } } .scene.night-sky .moon { position: absolute; right: 18%; top: 18%; width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 38% 38%, #f3ecdc 0%, #cfc6ae 70%); box-shadow: 0 0 30px rgba(243,236,220,.3); } /* Scene 5: fog morning */ .scene.fog-morning { background: linear-gradient(180deg, #8d94a6 0%, #a8aab4 55%, #7d8294 100%); } .scene.fog-morning .bank { position: absolute; left: -20%; right: -20%; height: 46%; border-radius: 50%; background: rgba(235, 235, 240, 0.35); filter: blur(22px); animation: drift 26s ease-in-out infinite alternate; } .scene.fog-morning .bank.b1 { top: 30%; } .scene.fog-morning .bank.b2 { top: 55%; animation-duration: 34s; animation-delay: -8s; } @keyframes drift { from { transform: translateX(-4%);} to { transform: translateX(4%);} } .scene.fog-morning .trees { position: absolute; bottom: 0; left: 0; right: 0; height: 38%; background: repeating-linear-gradient(90deg, rgba(58,66,74,.5) 0 14px, transparent 14px 52px); filter: blur(1px); opacity: .6; } /* Scene 6: mountain dusk */ .scene.mountain-dusk { background: linear-gradient(180deg, #2c3150 0%, #5b4a6b 45%, #a06a63 62%, #2f3045 63%, #262a3d 100%); } .scene.mountain-dusk .ridge { position: absolute; bottom: 0; left: 0; right: 0; height: 40%; clip-path: polygon(0 100%, 0 55%, 12% 30%, 24% 58%, 38% 18%, 52% 52%, 66% 28%, 80% 60%, 92% 38%, 100% 55%, 100% 100%); background: #1d2133; } .scene.mountain-dusk .glow { position: absolute; left: 0; right: 0; top: 52%; height: 12%; background: linear-gradient(180deg, rgba(224,150,120,.5), transparent); animation: fadeglow 12s ease-in-out infinite; } @keyframes fadeglow { 0%,100% { opacity: .7; } 50% { opacity: 1; } } /* Scene 7: ocean horizon */ .scene.ocean-horizon { background: linear-gradient(180deg, #6f87a3 0%, #9eb0bf 49%, #3e5c74 50%, #2c4258 100%); } .scene.ocean-horizon .swell { position: absolute; left: 0; right: 0; top: 50%; bottom: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 1.5px, transparent 1.5px 14px); animation: swell 8s ease-in-out infinite; } @keyframes swell { 0%,100% { transform: translateY(0);} 50% { transform: translateY(5px);} } .scene.ocean-horizon .gull { position: absolute; top: 24%; left: 30%; width: 16px; height: 6px; border: solid #e7e0cf; border-width: 1.5px 0 0 0; border-radius: 50% 50% 0 0; transform: rotate(-4deg); animation: glide 40s linear infinite; } @keyframes glide { from { transform: translateX(-80px);} to { transform: translateX(420px);} } /* ---------- Cards (good thing / long read) ---------- */ .card { background: var(--card); border: 1px solid rgba(217,160,91,.16); border-radius: 10px; padding: 1.6rem 1.7rem; } .read-link { display: inline-block; margin-top: 1rem; font-family: var(--serif-body); font-size: 0.95rem; } /* ---------- The Breath ---------- */ .breath-stage { display: flex; flex-direction: column; align-items: center; padding: 1.5rem 0 0.5rem; } .breath-circle { width: 150px; height: 150px; border-radius: 50%; border: 1.5px solid var(--amber); background: radial-gradient(circle, rgba(217,160,91,.16) 0%, transparent 70%); display: flex; align-items: center; justify-content: center; transition: transform 4s ease-in-out; box-shadow: 0 0 40px rgba(217,160,91,.12); } .breath-circle.inhale { transform: scale(1.45); } .breath-circle.hold { /* hold current scale via JS-frozen state */ } .breath-circle.exhale { transform: scale(1); } .breath-phase { font-family: var(--serif-display); font-size: 1.05rem; letter-spacing: 0.06em; } .breath-count { margin-top: 3.4rem; color: var(--ink-dim); font-size: .9rem; font-variant-numeric: tabular-nums; } button.begin { font-family: var(--serif-body); font-size: 1rem; color: var(--bg); background: var(--amber); border: 0; border-radius: 999px; padding: 0.75rem 2.2rem; cursor: pointer; letter-spacing: 0.04em; margin-top: 1.4rem; transition: background .3s ease; } button.begin:hover { background: var(--amber-soft); } .breath-live { display: flex; flex-direction: column; align-items: center; margin-top: 1.5rem; } .breath-live.hidden { display: none; } @media (prefers-reduced-motion: reduce) { .scene * , .breath-circle { animation: none !important; transition: none !important; } } /* ---------- The End ---------- */ .the-end { text-align: center; padding: 2rem 0 0; } .the-end .closing { font-style: italic; color: var(--ink-dim); max-width: 460px; margin: 0 auto 2.2rem; } .the-end .final { font-family: var(--serif-display); font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 500; line-height: 1.35; } .the-end .sub { margin-top: 0.8rem; color: var(--amber-soft); font-style: italic; } .the-end .horizon-final { margin-top: 3.5rem; } .patron { margin-top: 2.6rem; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink-dim); } .colophon { margin-top: 1.4rem; font-size: 0.78rem; color: var(--ink-dim); opacity: 0.75; } .colophon a { color: var(--ink-dim); } /* ---------- Decompress page ---------- */ body.decompress { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .airlock { text-align: center; max-width: 480px; padding: 2rem 1.5rem; } .airlock h1 { font-family: var(--serif-display); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; font-size: 1rem; color: var(--amber); margin-bottom: 2.5rem; } .airlock .lead { font-style: italic; color: var(--ink-dim); margin-bottom: 2.5rem; } .airlock .door { margin-top: 2.5rem; } .airlock .door p { font-family: var(--serif-display); font-size: 1.4rem; margin-bottom: .6rem; } .airlock .door .quiet { font-family: var(--serif-body); font-size: .95rem; color: var(--ink-dim); font-style: italic; } .hidden { display: none; }