/* ============================================================ Atrium — motyw „compluvium". Dwa nastroje: dzień (trawertyn) i noc (obsydian) przełączane atrybutem [data-theme] na . ============================================================ */ /* ---- DZIEŃ (domyślnie) ---- */ :root { --ivory: #faf5ec; --travertine: #f2eadb; --travertine-2: #ece2cf; --paper: #fdfaf3; --paper-2: #faf4ea; --ink: #2f2a22; --ink-soft: #5a5346; --ink-mute: #8c8473; --gold: #c9a24a; --gold-deep: #a9842f; --gold-soft: #d8b25a; --hair: rgba(169,132,47,.30); --hair-soft: rgba(169,132,47,.16); --card: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); --card-border: var(--hair); --card-border-hover: rgba(169,132,47,.55); --shadow: 26px 38px 76px -46px rgba(74,58,24,.40), 0 2px 10px -4px rgba(74,58,24,.14); --shadow-hover: 34px 54px 100px -44px rgba(74,58,24,.50), 0 8px 22px -6px rgba(74,58,24,.22); --mark-ring: inset 0 1px 0 rgba(255,255,255,.16); /* pigułki statusu */ --up-fg: #2f7d52; --up-bg: #e8f1e7; --up-bd: rgba(47,125,82,.26); --up-dot: #3aa86b; --down-fg: #a23b2a; --down-bg: #f6e7e2; --down-bd: rgba(162,59,42,.26); --down-dot: #c0492f; --check-fg: #8c7333; --check-bg: #f4ecd8; --check-bd: rgba(140,115,51,.26); --check-dot: #c9a24a; --err-fg: #6f6757; --err-bg: #efe9dc; --err-bd: rgba(111,103,87,.22); --err-dot-c: #9b927d; --serif: 'Fraunces', Georgia, 'Times New Roman', serif; --sans: 'Inter', system-ui, -apple-system, sans-serif; --beam-1: rgba(255,249,229,.85); --beam-2: rgba(252,242,210,.46); --beam-3: rgba(248,231,180,.20); --beam-4: rgba(244,225,165,0); --pool: rgba(216,178,90,.10); } /* ---- NOC ---- */ [data-theme="night"] { --ivory: #0a0c11; --travertine: #0a0c11; --travertine-2: #08090d; --paper: #171d2b; --paper-2: #141925; --ink: #efe9dd; --ink-soft: #c2bdb0; --ink-mute: #767c8b; --gold: #d8b25a; --gold-deep: #ecd193; --gold-soft: #ecd193; --hair: rgba(216,178,90,.18); --hair-soft: rgba(255,255,255,.06); --card: linear-gradient(180deg, #171d2b 0%, #141925 100%); --card-border: rgba(255,255,255,.06); --card-border-hover: rgba(216,178,90,.42); --shadow: 0 30px 60px -25px rgba(0,0,0,.85); --shadow-hover: 0 40px 74px -28px rgba(0,0,0,.92), 0 0 0 1px rgba(216,178,90,.16); --mark-ring: inset 0 1px 0 rgba(255,255,255,.10); --up-fg: #7ad9a2; --up-bg: rgba(111,207,151,.12); --up-bd: rgba(111,207,151,.28); --up-dot: #6fcf97; --down-fg: #f0a08c; --down-bg: rgba(192,73,47,.16); --down-bd: rgba(240,160,140,.30); --down-dot: #e07a5f; --check-fg: #e7cf94; --check-bg: rgba(216,178,90,.12); --check-bd: rgba(216,178,90,.28); --check-dot: #d8b25a; --err-fg: #9aa0ad; --err-bg: rgba(255,255,255,.05); --err-bd: rgba(255,255,255,.10); --err-dot-c: #767c8b; --beam-1: rgba(236,221,180,.22); --beam-2: rgba(216,178,90,.10); --beam-3: rgba(216,178,90,.045); --beam-4: rgba(216,178,90,0); --pool: rgba(236,221,180,.14); } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } html, body { min-height: 100%; } body { font-family: var(--sans); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden; background-color: var(--ivory); background-image: radial-gradient(120% 70% at 50% -6%, rgba(255,252,243,.95) 0%, rgba(250,245,236,0) 56%), radial-gradient(70% 50% at 16% 8%, rgba(216,178,90,.07) 0%, rgba(216,178,90,0) 55%), linear-gradient(180deg, var(--ivory) 0%, var(--travertine) 62%, var(--travertine-2) 100%); background-attachment: fixed; transition: background-color .5s ease, color .4s ease; } [data-theme="night"] body { background-image: radial-gradient(1100px 640px at 50% -8%, rgba(216,178,90,.10), transparent 62%), radial-gradient(900px 520px at 50% -5%, rgba(236,209,147,.07), transparent 55%), linear-gradient(180deg, #0b0e14 0%, #0a0c11 38%, #08090d 100%); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip { position: absolute; left: -999px; top: 10px; z-index: 60; background: var(--ink); color: var(--ivory); padding: 10px 18px; border-radius: 10px; text-decoration: none; font-size: .9rem; } .skip:focus { left: 50%; transform: translateX(-50%); } /* ---- niebo: compluvium, snop światła, impluvium ---- */ .sky { position: fixed; top: 0; left: 50%; width: min(620px, 90vw); height: min(720px, 86vh); transform: translateX(-50%); z-index: 0; pointer-events: none; overflow: visible; } .sky__beam { position: absolute; top: 0; left: 50%; width: 52%; height: 100%; transform: translateX(-50%) perspective(640px) rotateX(6deg); transform-origin: top center; background: linear-gradient(180deg, var(--beam-1) 0%, var(--beam-2) 28%, var(--beam-3) 60%, var(--beam-4) 100%); clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%); filter: blur(7px); animation: beam 12s ease-in-out infinite; } .sky__aperture { position: absolute; top: 6px; left: 50%; width: 116px; height: 116px; transform: translateX(-50%); border-radius: 4px; background: linear-gradient(180deg, rgba(255,251,236,0), rgba(255,251,236,.5)); box-shadow: 0 0 0 1px rgba(201,162,74,.40), 0 0 36px 10px rgba(255,243,205,.55), inset 0 0 24px rgba(255,247,222,.8); opacity: .8; animation: aperture 12s ease-in-out infinite; } .sky__pool { position: fixed; bottom: -6vh; left: 50%; width: 70vw; max-width: 820px; height: 36vh; transform: translateX(-50%); background: radial-gradient(60% 80% at 50% 0%, var(--pool), transparent 72%); filter: blur(8px); opacity: .8; animation: ripple 9s ease-in-out infinite; } @keyframes beam { 0%,100% { opacity:.78; } 50% { opacity:1; } } @keyframes aperture { 0%,100% { opacity:.62 } 50% { opacity:1 } } @keyframes ripple { 0%,100% { opacity:.66; transform: translateX(-50%) scaleY(1); } 50% { opacity:.92; transform: translateX(-50%) scaleY(1.05); } } .mote { position: absolute; left: 50%; top: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,247,220,.95), rgba(255,247,220,0) 70%); opacity: 0; animation: drift 11s linear infinite; } .mote:nth-child(4) { width:4px; height:4px; margin-left:-30px; animation-delay:0s; } .mote:nth-child(5) { width:3px; height:3px; margin-left:26px; animation-delay:2.4s; animation-duration:12s; } .mote:nth-child(6) { width:5px; height:5px; margin-left:-8px; animation-delay:5s; } .mote:nth-child(7) { width:2.5px; height:2.5px; margin-left:50px; animation-delay:6.8s; animation-duration:13s; } .mote:nth-child(8) { width:3.5px; height:3.5px; margin-left:-54px; animation-delay:3.6s; } @keyframes drift { 0% { opacity:0; transform: translateY(40px) translateX(0); } 12% { opacity:.8; } 80% { opacity:.45; } 100% { opacity:0; transform: translateY(440px) translateX(26px); } } /* ---- przełącznik motywu ---- */ .theme-toggle { position: fixed; top: clamp(.9rem, 2.5vw, 1.5rem); right: clamp(.9rem, 2.5vw, 1.5rem); z-index: 40; width: 44px; height: 44px; display: grid; place-items: center; color: var(--gold-deep); background: var(--paper); border: 1px solid var(--hair); border-radius: 999px; box-shadow: 0 6px 18px -8px rgba(74,58,24,.3); cursor: pointer; transition: transform .3s ease, border-color .3s ease, background .4s ease, color .4s ease; } .theme-toggle:hover { transform: translateY(-2px) rotate(-8deg); border-color: var(--gold); } .theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ivory), 0 0 0 5px var(--gold); } .theme-toggle svg { width: 21px; height: 21px; } .theme-toggle__moon { display: none; } [data-theme="night"] .theme-toggle__sun { display: none; } [data-theme="night"] .theme-toggle__moon { display: block; } /* ---- układ ---- */ .wrap { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; padding: clamp(2.6rem, 6vw, 5rem) clamp(1.15rem, 4vw, 2.25rem) 2.5rem; } /* ---- nagłówek ---- */ .masthead { text-align: center; margin-bottom: clamp(2.6rem, 6vw, 4.2rem); } .logo-mark { width: 64px; height: 64px; margin: 0 auto 1.2rem; display: block; filter: drop-shadow(0 6px 16px rgba(168,132,47,.28)); } .logo-mark__sky { animation: skyGlow 7s ease-in-out infinite; transform-origin: 32px 32px; } @keyframes skyGlow { 0%,100% { opacity:.8 } 50% { opacity:1 } } .eyebrow { font-weight: 500; font-size: clamp(.64rem, 1.4vw, .72rem); letter-spacing: .42em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 1.05rem; display: flex; align-items: center; justify-content: center; gap: .85em; } .eyebrow::before, .eyebrow::after { content:""; height:1px; width: clamp(24px,6vw,52px); background: linear-gradient(90deg, transparent, var(--gold) 60%); } .eyebrow::after { background: linear-gradient(90deg, var(--gold) 40%, transparent); } .wordmark { font-family: var(--serif); font-weight: 600; font-size: clamp(3.4rem, 10vw, 6rem); letter-spacing: .015em; line-height: .94; color: var(--ink); } .wordmark__dot { color: var(--gold-deep); } .rule { width: min(320px, 66%); height: 1px; margin: 1.5rem auto 0; border: 0; position: relative; background: linear-gradient(90deg, transparent, var(--hair) 18%, var(--gold) 50%, var(--hair) 82%, transparent); } .rule::after { content:""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%,-50%) rotate(45deg); background: var(--gold-soft); box-shadow: 0 0 0 1px var(--ivory); } .tagline { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.12rem, 2.7vw, 1.5rem); color: var(--ink-soft); margin-top: 1.1rem; } /* ---- siatka kafelków ---- */ .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.5rem); } @media (max-width: 660px) { .grid { grid-template-columns: 1fr; } } .tile { position: relative; display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 1.5rem); text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--card-border); border-radius: 18px; padding: clamp(1.4rem, 3vw, 1.9rem); overflow: hidden; isolation: isolate; box-shadow: var(--shadow); transition: transform .42s cubic-bezier(.2,.7,.2,1), border-color .42s ease, box-shadow .42s ease; } /* poświata w kolorze marki */ .tile::before { content:""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(125% 95% at 18% -12%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%); opacity: .45; transition: opacity .45s ease; } .tile__frame { position: absolute; inset: 6px; z-index: 0; pointer-events: none; border: 1px solid var(--hair-soft); border-radius: 13px; } .tile__sweep { position: absolute; top: -60%; left: -30%; width: 55%; height: 220%; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 0%, color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.5)) 50%, transparent 100%); transform: translateX(-130%) rotate(2deg); transition: transform .9s cubic-bezier(.2,.7,.2,1); } .tile > .tile__mark, .tile > .tile__body { position: relative; z-index: 2; } .tile:hover, .tile:focus-visible { transform: translateY(-5px); border-color: var(--card-border-hover); box-shadow: var(--shadow-hover), 0 24px 60px -34px color-mix(in srgb, var(--accent) 60%, transparent); } .tile:hover::before, .tile:focus-visible::before { opacity: 1; } .tile:hover .tile__sweep, .tile:focus-visible .tile__sweep { transform: translateX(280%) rotate(2deg); } .tile:focus-visible { outline: none; box-shadow: var(--shadow-hover), 0 0 0 3px var(--ivory), 0 0 0 6px var(--accent); } .tile__mark { flex: 0 0 auto; width: clamp(58px, 13vw, 72px); height: clamp(58px, 13vw, 72px); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 24px -10px rgba(20,16,6,.45), var(--mark-ring); transition: transform .42s cubic-bezier(.2,.7,.2,1); } .tile__mark svg { display: block; width: 100%; height: 100%; } .tile:hover .tile__mark, .tile:focus-visible .tile__mark { transform: scale(1.05) rotate(-1.5deg); } .tile__body { flex: 1 1 auto; min-width: 0; } .tile__name { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 3vw, 1.6rem); line-height: 1.1; color: var(--ink); margin-bottom: .28rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; } .tile__arrow { font-family: var(--sans); font-size: .82rem; color: var(--gold-deep); opacity: 0; transform: translateX(-4px); transition: opacity .35s ease, transform .35s ease; } .tile:hover .tile__arrow, .tile:focus-visible .tile__arrow { opacity: 1; transform: translateX(0); } .tile__desc { font-size: clamp(.86rem, 1.9vw, .94rem); color: var(--ink-soft); line-height: 1.45; margin-bottom: .85rem; } .tile__meta { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; } .tile__url { font-size: .72rem; letter-spacing: .02em; color: var(--ink-mute); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* ---- pigułki statusu ---- */ .pill { display: inline-flex; align-items: center; gap: .46em; font-size: .71rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; padding: .32em .72em .32em .58em; border-radius: 999px; white-space: nowrap; color: var(--check-fg); background: var(--check-bg); border: 1px solid var(--check-bd); transition: color .3s ease, background .3s ease, border-color .3s ease; } .pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--check-dot); flex: 0 0 auto; } .pill[data-state="up"] { color: var(--up-fg); background: var(--up-bg); border-color: var(--up-bd); } .pill[data-state="up"] .pill__dot { background: var(--up-dot); animation: pulse 2.6s ease-out infinite; } .pill[data-state="down"] { color: var(--down-fg); background: var(--down-bg); border-color: var(--down-bd); } .pill[data-state="down"] .pill__dot { background: var(--down-dot); } .pill[data-state="checking"] .pill__dot { background: var(--check-dot); animation: blink 1.1s ease-in-out infinite; } .pill[data-state="error"] { color: var(--err-fg); background: var(--err-bg); border-color: var(--err-bd); } .pill[data-state="error"] .pill__dot { background: var(--err-dot-c); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up-dot) 55%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes blink { 0%,100% { opacity:1 } 50% { opacity:.35 } } /* ---- sekcja „więcej" ---- */ .more { margin-top: clamp(2rem, 4.5vw, 3rem); text-align: center; } .more__label { font-size: .68rem; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; gap: .85em; } .more__label::before, .more__label::after { content:""; height:1px; flex: 0 1 90px; background: linear-gradient(90deg, transparent, var(--hair-soft)); } .more__label::after { background: linear-gradient(90deg, var(--hair-soft), transparent); } .more__row { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; } .more__link { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink-soft); font-size: .92rem; font-weight: 500; padding: .5rem .55rem .5rem .6rem; border: 1px solid var(--hair-soft); border-radius: 999px; background: color-mix(in srgb, var(--paper) 60%, transparent); transition: color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease; } .more__mark { width: 26px; height: 26px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; } .more__mark svg { display: block; width: 100%; height: 100%; } .more__arrow { width: 15px; height: 15px; opacity: .7; } .more__link:hover, .more__link:focus-visible { color: var(--ink); border-color: var(--accent); background: var(--paper); transform: translateY(-2px); } .more__link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ivory), 0 0 0 5px var(--accent); } /* ---- stopka ---- */ .footer { margin-top: clamp(2.8rem, 6vw, 4.2rem); padding-top: 1.6rem; border-top: 1px solid var(--hair-soft); text-align: center; color: var(--ink-mute); display: flex; flex-direction: column; align-items: center; gap: .35rem; } .footer__mark { font-family: var(--serif); font-style: italic; font-size: .98rem; color: var(--ink-soft); } .footer__mark b { color: var(--gold-deep); font-weight: 600; font-style: normal; } .footer__clock { font-style: normal; font-family: var(--sans); font-size: .76rem; letter-spacing: .04em; color: var(--ink-mute); } .footer__note { font-size: .74rem; letter-spacing: .03em; max-width: 52ch; } @media (max-width: 440px) { .tile { flex-direction: column; text-align: center; align-items: center; } .tile__name, .tile__meta { justify-content: center; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .tile:hover, .tile:focus-visible { transform: none; } .tile:hover .tile__mark, .tile:focus-visible .tile__mark { transform: none; } }