@font-face { font-family: "Baloo 2"; src: url("/assets/fonts/Baloo2-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; } @font-face { font-family: "Baloo 2"; src: url("/assets/fonts/Baloo2-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; } @font-face { font-family: "Baloo 2"; src: url("/assets/fonts/Baloo2-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; } /* Färgerna kommer ur lib/app/app_theme.dart — sajten och appen ska se ut som samma sak. */ :root { --night: #081a31; --deep: #040f1e; --sea: #1b4e82; --sea-soft: #163f6b; --surface: rgba(255, 255, 255, 0.09); --surface-border: rgba(255, 255, 255, 0.18); --tile: #ffffff; --filler: #96a1ae; --ink: #15233a; --gold: #ffc94d; --gold-deep: #e9a82f; --sky: #7fd1ff; --paper: #f4f8fc; --text: #ffffff; --text-muted: rgba(255, 255, 255, 0.72); --display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif; --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --shell: min(1100px, 100% - 2.5rem); --radius: 18px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--body); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem); line-height: 1.65; color: var(--text); background: var(--night); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 0 0 0.5em; } p { margin: 0 0 1rem; } img { max-width: 100%; height: auto; } a { color: var(--gold); } a:focus-visible, .btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 8px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--gold); color: var(--ink); padding: 0.6rem 1rem; z-index: 20; } .skip-link:focus { left: 1rem; top: 1rem; } /* ---------- knappar ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-family: var(--display); font-weight: 600; font-size: 1.05rem; text-decoration: none; padding: 0.7rem 1.5rem; border-radius: 999px; border: 2px solid transparent; transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease; } .btn--large { font-size: 1.2rem; padding: 0.9rem 2rem; } .btn--small { font-size: 0.95rem; padding: 0.4rem 1.1rem; } .btn svg { flex: none; } .btn--gold { color: var(--ink); background: linear-gradient(180deg, #ffdc80 0%, var(--gold) 55%, var(--gold-deep) 100%); box-shadow: 0 6px 0 #b98218, 0 14px 26px rgba(0, 0, 0, 0.35); } .btn--gold:hover { transform: translateY(-2px); filter: brightness(1.04); } .btn--gold:active { transform: translateY(3px); box-shadow: 0 3px 0 #b98218, 0 8px 16px rgba(0, 0, 0, 0.3); } .btn--ghost { color: var(--text); background: var(--surface); border-color: var(--surface-border); } .btn--ghost:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.16); } .btn--ghost:active { transform: translateY(1px); } /* Vilken knapp som är i fokus avgörs av plattformen. Skriptet i sätter data-platform på innan sidan ritas, så det syns aldrig något hopp. På en iPhone eller iPad är App Store det självklara valet — webbversionen finns kvar, men som andrahandsval. */ .cta { display: flex; flex-wrap: wrap; gap: 0.85rem; } .hero .cta, .playband .cta { justify-content: center; } .cta__app { order: 2; } .cta__web { order: 1; } html[data-platform="ios"] .cta__app { order: 1; } html[data-platform="ios"] .cta__web { order: 2; } /* Grundläget (dator, Android): spela i webbläsaren är förstahandsvalet. */ .cta__web { color: var(--ink); background: linear-gradient(180deg, #ffdc80 0%, var(--gold) 55%, var(--gold-deep) 100%); box-shadow: 0 6px 0 #b98218, 0 14px 26px rgba(0, 0, 0, 0.35); border-color: transparent; } .cta__app { color: var(--text); background: var(--surface); border-color: var(--surface-border); box-shadow: none; } /* På iOS byter de plats. */ html[data-platform="ios"] .cta__app { color: var(--ink); background: linear-gradient(180deg, #ffdc80 0%, var(--gold) 55%, var(--gold-deep) 100%); box-shadow: 0 6px 0 #b98218, 0 14px 26px rgba(0, 0, 0, 0.35); border-color: transparent; } html[data-platform="ios"] .cta__web { color: var(--text); background: var(--surface); border-color: var(--surface-border); box-shadow: none; } .cta__app:hover, .cta__web:hover { transform: translateY(-2px); } .cta__app:active, .cta__web:active { transform: translateY(1px); } /* ---------- topplist ---------- */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem max(1.25rem, (100% - 1100px) / 2); background: rgba(4, 15, 30, 0.82); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(127, 209, 255, 0.16); } .topbar__brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--text); text-decoration: none; } .topbar__brand img { border-radius: 9px; } .topbar__nav { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); } .topbar__nav a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.95rem; } .topbar__nav a:hover { color: var(--gold); } .topbar__nav .btn { color: var(--ink); } @media (max-width: 520px) { .topbar__nav a:not(.btn) { display: none; } } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(3rem, 8vw, 5.5rem); background: radial-gradient(120% 80% at 50% 120%, rgba(127, 209, 255, 0.18) 0%, rgba(127, 209, 255, 0) 60%), linear-gradient(180deg, var(--night) 0%, var(--sea) 100%); text-align: center; } .hero__inner { position: relative; z-index: 2; width: var(--shell); margin: 0 auto; } .hero__logo { width: min(280px, 62%); height: auto; animation: bob 6s ease-in-out infinite; } .hero__tagline { font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem); color: var(--gold); margin: 1.2rem 0 0.6rem; } .hero__lede { max-width: 34rem; margin: 0 auto 2rem; color: var(--text-muted); } .hero__note { margin: 1.4rem 0 0; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } @keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } } /* ---------- brickor som dekor ---------- */ .tiles { display: flex; justify-content: center; gap: 6px; margin: 0 0 1.1rem; height: 62px; } .tile { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; font-family: var(--display); font-weight: 700; font-size: 1.6rem; color: var(--ink); background: var(--tile); box-shadow: 0 4px 0 rgba(4, 16, 32, 0.28); } .tile--empty { background: var(--filler); } .tile--gold { background: var(--gold); } .tile--lemon { background: #fffacd; } .tile--mint { background: #98fb98; } .tile--rose { background: #ffaeb9; } /* ---------- sektioner ---------- */ .section { padding: clamp(3rem, 7vw, 4.5rem) 0; text-align: center; } .section--paper { background: var(--paper); color: var(--ink); } .section--deep { background: linear-gradient(180deg, var(--night) 0%, var(--deep) 100%); } .section--night { background: var(--night); } .section__title { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.7rem); margin-bottom: 0.35rem; } .section--paper .section__title { color: var(--sea); } .section__lede { width: var(--shell); max-width: 36rem; margin: 0 auto clamp(2rem, 4vw, 3rem); } .section--paper .section__lede { color: rgba(21, 35, 58, 0.75); } .section--deep .section__lede { color: var(--text-muted); } /* stegen */ .steps { list-style: none; width: var(--shell); margin: 0 auto; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: step; } .step { position: relative; counter-increment: step; background: #ffffff; border: 1px solid rgba(21, 35, 58, 0.1); border-radius: var(--radius); padding: 1.9rem 1.25rem 1.35rem; box-shadow: 0 10px 24px rgba(21, 35, 58, 0.09); } .step::before { content: counter(step); position: absolute; top: -15px; left: 50%; translate: -50% 0; width: 34px; height: 34px; display: grid; place-items: center; font-family: var(--display); font-weight: 700; color: var(--ink); background: linear-gradient(180deg, #ffdc80, var(--gold-deep)); border-radius: 50%; box-shadow: 0 4px 10px rgba(21, 35, 58, 0.22); } .step h3 { font-size: 1.3rem; color: var(--sea); margin-top: 0.25rem; } .step p { margin: 0; font-size: 0.97rem; color: rgba(21, 35, 58, 0.78); } /* skärmbilder */ .shots { width: var(--shell); margin: 0 auto; padding: 0; list-style: none; display: grid; gap: 1.5rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .shot img { display: block; width: 100%; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4); } .shot figcaption { margin-top: 0.85rem; font-family: var(--display); font-weight: 600; color: var(--text-muted); font-size: 0.98rem; } /* kort */ .cards { width: var(--shell); margin: 0 auto; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); text-align: left; } .card { background: linear-gradient(180deg, var(--sea-soft) 0%, rgba(8, 26, 49, 0.9) 100%); border: 1px solid rgba(127, 209, 255, 0.22); border-radius: var(--radius); padding: 1.6rem 1.5rem; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28); } .card h3 { font-size: 1.25rem; color: var(--gold); } .card p { margin: 0; color: var(--text-muted); } /* ---------- spelband ---------- */ .playband { width: var(--shell); margin: clamp(2.5rem, 6vw, 4rem) auto; padding: clamp(2rem, 5vw, 3rem); text-align: center; border-radius: 26px; border: 1px solid rgba(255, 201, 77, 0.35); background: linear-gradient(180deg, var(--sea) 0%, var(--night) 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); } .playband h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); } .playband p { color: var(--text-muted); } .playband__aside { margin: 1.2rem 0 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.6); } /* ---------- sidfot ---------- */ .footer { background: var(--deep); border-top: 1px solid rgba(127, 209, 255, 0.14); padding: 2rem max(1.25rem, (100% - 1100px) / 2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.6); } .footer p { margin: 0; } .footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; } .footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; } .footer a:hover { color: var(--gold); } /* ---------- juridiska sidor ---------- */ .legal { width: var(--shell); max-width: 46rem; margin: clamp(2rem, 5vw, 3.5rem) auto clamp(3rem, 6vw, 4.5rem); background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 3rem); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3); } .legal h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.7rem); color: var(--sea); margin-bottom: 0.25rem; } .legal h2 { font-size: 1.35rem; color: var(--sea); margin-top: 2rem; } .legal a { color: #1462a8; } .legal ul { padding-left: 1.2rem; } .legal li { margin-bottom: 0.4rem; } .legal code { background: rgba(21, 35, 58, 0.08); border-radius: 5px; padding: 0.1em 0.35em; font-size: 0.92em; } .legal__updated { font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(21, 35, 58, 0.6); margin-bottom: 2rem; } .legal__lede { font-size: 1.1rem; } /* ---------- 404 ---------- */ .notfound { min-height: 60vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 0.5rem; padding: clamp(3rem, 8vw, 6rem) 1.25rem; } .notfound img { width: min(200px, 55vw); animation: bob 6s ease-in-out infinite; } .notfound h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3rem); color: var(--gold); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }