/* ================================================================= Guppy Time — stylesheet Mobile-first. All colour driven by --primary / --accent (set per site in the header) plus a data-theme attribute on for the surface palette (light / dark / ocean). ================================================================= */ /* ---- Theme surfaces ------------------------------------------- */ :root, [data-theme="light"] { --bg: #f5fafb; --surface: #ffffff; --surface-2: #eef5f6; --border: #d8e6e8; --text: #122023; --text-soft: #4d6469; --shadow: 0 1px 2px rgba(18,32,35,.06), 0 8px 24px rgba(18,32,35,.06); --ring: color-mix(in srgb, var(--primary) 40%, transparent); } [data-theme="dark"] { --bg: #0d1518; --surface: #142024; --surface-2: #1b2c31; --border: #273c42; --text: #e7f1f2; --text-soft: #9bb2b7; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45); --ring: color-mix(in srgb, var(--primary) 55%, transparent); } [data-theme="ocean"] { --bg: #062a3a; --surface: #0a3b50; --surface-2: #0e4a63; --border: #14617f; --text: #e3f6fb; --text-soft: #9fd4e3; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(2,20,28,.55); --ring: color-mix(in srgb, var(--accent) 50%, transparent); } /* ---- Reset / base --------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; transition: background .25s ease, color .25s ease; min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3 { font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; line-height: 1.18; letter-spacing: -.01em; margin: 0 0 .5em; } h1 { font-size: clamp(1.9rem, 5vw, 3rem); } h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); } h3 { font-size: 1.15rem; } p { margin: 0 0 1rem; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } .container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 1.1rem; } main { flex: 1 0 auto; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--accent); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 6px; } /* ---- Header / nav --------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; } .brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.2rem; color: var(--text); } .brand:hover { text-decoration: none; } .brand-text { letter-spacing: -.02em; } .gt-logo-mark { flex: none; } .primary-nav { display: flex; align-items: center; gap: .35rem; } .primary-nav a { color: var(--text-soft); font-weight: 600; padding: .5rem .7rem; border-radius: 8px; font-size: .95rem; } .primary-nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; } .primary-nav a[aria-current="page"] { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); } .theme-toggle { margin-left: .25rem; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 1.2rem; cursor: pointer; line-height: 1; display: grid; place-items: center; transition: transform .2s ease, background .2s ease; } .theme-toggle:hover { transform: rotate(180deg); background: var(--surface); } .nav-toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px; cursor: pointer; padding: 11px 10px; } .nav-toggle span { height: 2px; background: var(--text); border-radius: 2px; transition: .25s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---- Buttons -------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 700; font-size: 1rem; padding: .8rem 1.4rem; border-radius: 12px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, filter .2s ease; text-decoration: none; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { filter: brightness(1.08); } .btn-accent { background: var(--accent); color: #fff; } .btn-accent:hover { filter: brightness(1.08); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn-ghost:hover { background: var(--surface-2); } .btn-block { width: 100%; } /* ---- Hero ----------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(900px 420px at 78% -10%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 60%), radial-gradient(720px 380px at 8% 110%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%); border-bottom: 1px solid var(--border); } .hero-inner { padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4.5rem); max-width: 720px; } .eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; } .hero h1 { margin-bottom: .6rem; } .hero .lede { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--text-soft); margin-bottom: 1.8rem; } .hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; } /* The bubble field — the page's signature flourish */ .bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .bubble { position: absolute; bottom: -40px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 30%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); animation: rise linear infinite; } @keyframes rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { opacity: .8; } 100% { transform: translateY(-72vh) scale(1); opacity: 0; } } .hero-inner { position: relative; z-index: 1; } /* ---- Sections / cards ----------------------------------------- */ .section { padding: clamp(2.5rem, 6vw, 4rem) 0; } .section-tight { padding: clamp(1.6rem, 4vw, 2.6rem) 0; } .section h2 { margin-bottom: .3rem; } .section .sub { color: var(--text-soft); margin-bottom: 2rem; max-width: 60ch; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.4rem; box-shadow: var(--shadow); } .grid { display: grid; gap: 1.1rem; } .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } .step-num { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); font-weight: 800; margin-bottom: .7rem; } .card h3 { margin-bottom: .35rem; } .card p { color: var(--text-soft); margin: 0; } /* ---- Identify page -------------------------------------------- */ .identify-wrap { max-width: 640px; margin: 0 auto; } .dropzone { border: 2px dashed var(--border); border-radius: 18px; background: var(--surface); padding: 2.4rem 1.4rem; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; } .dropzone:hover, .dropzone.dragover { border-color: var(--primary); background: var(--surface-2); } .dropzone svg { margin: 0 auto .7rem; } .dropzone .dz-title { font-weight: 700; margin-bottom: .25rem; } .dropzone .dz-hint { color: var(--text-soft); font-size: .9rem; } .dz-preview { max-height: 280px; width: auto; margin: 0 auto .8rem; border-radius: 12px; } .field-note { font-size: .85rem; color: var(--text-soft); margin-top: .9rem; text-align: center; } .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Result card */ .result { margin-top: 1.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; } .result-head { padding: 1.3rem 1.4rem; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, var(--surface)), color-mix(in srgb, var(--accent) 12%, var(--surface))); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .result-name { font-size: 1.5rem; font-weight: 800; margin: 0; } .result-name small { display: block; font-size: .8rem; font-weight: 600; color: var(--text-soft); letter-spacing: .1em; text-transform: uppercase; } .conf-badge { font-weight: 800; font-size: .8rem; padding: .4rem .8rem; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; color: #fff; white-space: nowrap; } .conf-high { background: #2e9e5b; } .conf-medium { background: #e0a106; color: #2a2000; } .conf-low { background: #d64545; } .result-grid { display: grid; grid-template-columns: 1fr; gap: 0; } .trait { padding: 1rem 1.4rem; border-bottom: 1px solid var(--border); } .trait:last-child { border-bottom: 0; } .trait .label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); font-weight: 700; } .trait .value { font-size: 1.1rem; font-weight: 600; text-transform: capitalize; } .result-notes { padding: 1.2rem 1.4rem; } .result-notes h4 { margin: 0 0 .3rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); } .result-notes p { color: var(--text); margin: 0 0 1rem; } .ambiguity { background: color-mix(in srgb, #e0a106 16%, var(--surface)); border: 1px solid color-mix(in srgb, #e0a106 40%, transparent); border-radius: 12px; padding: .9rem 1.1rem; color: var(--text); } .ambiguity strong { display: block; margin-bottom: .2rem; } .spinner { width: 38px; height: 38px; border: 4px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 1.2rem auto; } @keyframes spin { to { transform: rotate(360deg); } } .alert { border-radius: 12px; padding: .9rem 1.1rem; margin-top: 1rem; } .alert-error { background: color-mix(in srgb, #d64545 14%, var(--surface)); border: 1px solid color-mix(in srgb, #d64545 45%, transparent); } .hidden { display: none !important; } /* ---- Content pages -------------------------------------------- */ .prose { max-width: 70ch; } .prose h2 { margin-top: 2.2rem; } .prose ul { padding-left: 1.2rem; } .prose li { margin-bottom: .4rem; } .lead { font-size: 1.15rem; color: var(--text-soft); } .tail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .tail-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1rem; text-align: center; } .tail-card svg { margin: 0 auto .5rem; display: block; } .tail-card .tn { font-weight: 700; } .tail-card .td { font-size: .82rem; color: var(--text-soft); } .swatch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; } .swatch { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); } .swatch .chip { height: 54px; } .swatch .sn { padding: .55rem .7rem; font-weight: 700; font-size: .92rem; } .swatch .sd { padding: 0 .7rem .7rem; font-size: .8rem; color: var(--text-soft); } /* ---- Footer --------------------------------------------------- */ .site-footer { flex-shrink: 0; background: var(--surface); border-top: 1px solid var(--border); margin-top: 3rem; } .footer-inner { padding: 2rem 0; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; } .footer-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; } .footer-nav { display: flex; flex-wrap: wrap; gap: 1rem; } .footer-nav a { color: var(--text-soft); font-weight: 600; font-size: .92rem; } .footer-note { color: var(--text-soft); font-size: .85rem; margin: 0; } /* ---- Admin ---------------------------------------------------- */ .admin-shell { display: flex; flex-direction: column; min-height: 100vh; } .admin-top { background: var(--surface); border-bottom: 1px solid var(--border); } .admin-top .container { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 1rem; } .admin-top .brand { font-size: 1.05rem; } .admin-nav { display: flex; gap: .3rem; align-items: center; } .admin-nav a { padding: .45rem .8rem; border-radius: 8px; color: var(--text-soft); font-weight: 600; font-size: .92rem; } .admin-nav a:hover, .admin-nav a.active { background: var(--surface-2); color: var(--text); text-decoration: none; } .login-page { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; } .login-card { width: 100%; max-width: 380px; } .login-card .brand { justify-content: center; margin-bottom: 1.2rem; font-size: 1.3rem; } .stat-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.2rem 1.3rem; box-shadow: var(--shadow); } .stat .n { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--primary); } .stat .l { color: var(--text-soft); font-size: .9rem; margin-top: .35rem; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); margin-bottom: 1.6rem; overflow: hidden; } .panel-head { padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); font-weight: 700; } .table-scroll { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; min-width: 480px; } table.data th, table.data td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--border); font-size: .92rem; } table.data th { color: var(--text-soft); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; } table.data tr:last-child td { border-bottom: 0; } table.data .num { text-align: right; font-variant-numeric: tabular-nums; } /* Forms */ .form-row { margin-bottom: 1.1rem; } .form-row label { display: block; font-weight: 700; margin-bottom: .35rem; font-size: .92rem; } .form-row .hint { font-size: .82rem; color: var(--text-soft); margin: .25rem 0 0; } .input, select.input { width: 100%; padding: .7rem .85rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 1rem; font-family: inherit; } .input:focus { border-color: var(--primary); } input[type="color"].input { height: 46px; padding: .25rem; cursor: pointer; } .toggle-row { display: flex; align-items: center; gap: .6rem; } .settings-grid { display: grid; grid-template-columns: 1fr; gap: 0 1.4rem; } /* ---- Responsive ----------------------------------------------- */ @media (min-width: 681px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .result-grid { grid-template-columns: repeat(2, 1fr); } .trait { border-right: 1px solid var(--border); } .trait:nth-child(2n) { border-right: 0; } .tail-grid { grid-template-columns: repeat(3, 1fr); } .swatch-grid { grid-template-columns: repeat(3, 1fr); } .stat-grid { grid-template-columns: repeat(3, 1fr); } .settings-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .nav-toggle { display: flex; } .primary-nav { position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--border); padding: .6rem 1.1rem 1.1rem; gap: .2rem; transform: translateY(-130%); transition: transform .28s ease; box-shadow: var(--shadow); } .primary-nav.open { transform: translateY(0); } .primary-nav a { padding: .8rem .7rem; font-size: 1.05rem; } .theme-toggle { margin: .4rem 0 0; align-self: flex-start; } .admin-nav { gap: .15rem; } .admin-nav a { padding: .4rem .55rem; font-size: .85rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .bubble { display: none; } }