/* Sunset Duckies Cup — shared certificate styles. Used by every prize certificate. Set , , or combine with . */ @font-face { font-family: "Sunset Anton"; src: url("../brand/anton-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Sunset La Belle"; src: url("../brand/la-belle-aurore-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } :root { --ink: #08151d; --ink-soft: rgba(8, 21, 29, 0.7); --paper: #fffaf0; --paper-warm: #fff1cc; --cream: #fff5de; --coral: #f4512c; --sun: #ffd84d; --gold: #e7a51c; --teal: #00b8b0; --ocean: #147a9f; --pink: #f55f9a; --lilac: #b8a7ff; --line: rgba(8, 21, 29, 0.16); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; font-family: "Outfit", system-ui, sans-serif; color: var(--ink); padding: 26px; } .cert { width: min(100%, 1080px); margin: 0 auto; aspect-ratio: 1.414 / 1; position: relative; overflow: hidden; display: grid; place-items: center; padding: 58px 76px 46px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 244, 214, 0.9)), var(--paper); border: 3px solid var(--ink); border-radius: 28px; box-shadow: 0 26px 70px rgba(8, 21, 29, 0.18), 10px 10px 0 0 var(--ink); } .brand-logo { display: none; } .cert::before { content: ""; position: absolute; inset: 18px; border: 1.5px solid var(--ink); border-radius: 18px; pointer-events: none; z-index: 1; } .cert::after { content: ""; position: absolute; inset: 32px; border-radius: 14px; pointer-events: none; z-index: 0; background: linear-gradient(90deg, var(--line) 1px, transparent 1px), linear-gradient(0deg, var(--line) 1px, transparent 1px); background-size: 34px 34px; opacity: 0.35; -webkit-mask-image: radial-gradient(ellipse 60% 48% at 50% 46%, transparent 0 56%, #000 74%); mask-image: radial-gradient(ellipse 60% 48% at 50% 46%, transparent 0 56%, #000 74%); } .inner { width: 100%; position: relative; z-index: 3; text-align: center; } .inner::before, .inner::after { content: ""; display: block; width: min(480px, 62%); height: 14px; margin: 0 auto 18px; background: radial-gradient(12px 10px at 12px 100%, transparent 94%, var(--ocean) 96% 100%, transparent 102%), linear-gradient(90deg, transparent, var(--teal), var(--sun), var(--coral), transparent); background-size: 24px 14px, 100% 3px; background-position: 0 0, 0 11px; background-repeat: repeat-x, no-repeat; } .inner::after { display: none; } .corner { position: absolute; width: 82px; height: 82px; z-index: 4; display: grid; place-items: center; border: 2.5px solid var(--ink); border-radius: 20px; background: var(--paper); box-shadow: 4px 4px 0 0 var(--ink); font-size: 1.55rem; } .corner::after { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(8, 21, 29, 0.42); border-radius: 14px; pointer-events: none; } .corner.tl { top: 28px; left: 28px; transform: rotate(-7deg); } .corner.tr { top: 28px; right: 28px; transform: rotate(7deg); box-shadow: -4px 4px 0 0 var(--ink); } .corner.bl { bottom: 28px; left: 28px; transform: rotate(5deg); box-shadow: 4px -4px 0 0 var(--ink); } .corner.br { bottom: 28px; right: 28px; transform: rotate(-5deg); box-shadow: -4px -4px 0 0 var(--ink); } .kicker { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0.42rem 1rem; border: 1.5px solid var(--ink); border-radius: 999px; box-shadow: 2px 2px 0 0 var(--ink); font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.24em; line-height: 1.2; text-transform: uppercase; } .emblem { width: 116px; height: 116px; margin: 18px auto 10px; display: grid; place-items: center; position: relative; isolation: isolate; font-size: 3.3rem; line-height: 1; filter: drop-shadow(3px 5px 0 rgba(8, 21, 29, 0.18)); } .emblem::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 3px solid var(--ink); border-radius: 35% 65% 58% 42% / 44% 36% 64% 56%; background: var(--sun); box-shadow: 5px 5px 0 0 var(--ink); transform: rotate(-8deg); } .eyebrow, .awarded { margin: 0 0 8px; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.18em; line-height: 1.4; text-transform: uppercase; color: var(--ink-soft); } h1 { max-width: 820px; margin: 0 auto 8px; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(2.35rem, 5.2vw, 4.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 0.92; text-wrap: balance; } h1 .title, h1 .accent { font-family: "Fraunces", serif; font-style: italic; font-weight: 760; color: var(--coral); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; } .subtitle { margin: 0 0 22px; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.16em; line-height: 1.5; text-transform: uppercase; color: var(--ink-soft); } .awarded { margin-top: 10px; margin-bottom: 8px; } .name { width: min(650px, 76%); min-height: 3.8rem; margin: 0 auto 12px; padding: 2px 18px 10px; border-bottom: 3px solid var(--ink); font-family: "Fraunces", serif; font-size: clamp(2.35rem, 5.1vw, 4.2rem); font-style: italic; font-weight: 650; letter-spacing: -0.015em; line-height: 1.05; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; } .name:empty::before { content: " "; display: inline-block; min-width: 10ch; } .blurb { max-width: 680px; margin: 0 auto; font-size: 1.04rem; line-height: 1.52; text-wrap: balance; } .signoff { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; max-width: 680px; margin: 26px auto 0; } .sig { border-top: 2px solid var(--ink); padding-top: 8px; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.14em; line-height: 1.35; text-align: center; text-transform: uppercase; color: var(--ink-soft); } .sig strong { display: block; margin-bottom: 4px; font-family: "Bricolage Grotesque", sans-serif; font-size: 1.02rem; font-weight: 700; letter-spacing: 0; line-height: 1.1; text-transform: none; color: var(--ink); } [contenteditable]:focus { outline: 2px dashed var(--teal); outline-offset: 5px; border-radius: 8px; } .print-btn { position: fixed; top: 16px; right: 16px; z-index: 20; color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 0 var(--ink); padding: 10px 18px; border-radius: 999px; font-family: "Bricolage Grotesque", sans-serif; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; cursor: pointer; } .print-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 var(--ink); } .hint { max-width: 760px; margin: 18px auto 0; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; line-height: 1.7; text-align: center; color: rgba(8, 21, 29, 0.55); } .hint .editable { background: rgba(0, 184, 176, 0.2); padding: 2px 8px; border-radius: 999px; } body.crown { background: radial-gradient(ellipse 58% 42% at 50% -6%, rgba(255, 216, 77, 0.72), transparent 66%), radial-gradient(ellipse 48% 42% at 2% 94%, rgba(244, 81, 44, 0.24), transparent 64%), radial-gradient(ellipse 46% 42% at 98% 92%, rgba(0, 184, 176, 0.3), transparent 64%), linear-gradient(180deg, #fff6df, #fdf0d1); } body.crown .cert { background: radial-gradient(circle at 50% 2%, rgba(255, 216, 77, 0.42), transparent 37%), linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 241, 204, 0.94)), var(--paper); } body.crown .kicker, body.crown .print-btn { background: var(--sun); } body.crown .corner.tl { background: #ffd84d; } body.crown .corner.tr { background: #f0b22a; } body.crown .corner.bl { background: #f97755; } body.crown .corner.br { background: #25d1c4; } .rays { position: absolute; top: -210px; left: 50%; width: 690px; height: 690px; transform: translateX(-50%); pointer-events: none; opacity: 0.45; z-index: 0; border-radius: 50%; background: repeating-conic-gradient(from -6deg at 50% 50%, rgba(231, 165, 28, 0.56) 0deg 6deg, transparent 6deg 14deg); -webkit-mask-image: radial-gradient(circle, transparent 0 23%, #000 26% 52%, transparent 64%); mask-image: radial-gradient(circle, transparent 0 23%, #000 26% 52%, transparent 64%); } body.award { background: radial-gradient(ellipse 46% 38% at 4% 8%, rgba(0, 184, 176, 0.34), transparent 65%), radial-gradient(ellipse 46% 38% at 96% 8%, rgba(245, 95, 154, 0.32), transparent 65%), radial-gradient(ellipse 74% 42% at 50% 104%, rgba(20, 122, 159, 0.24), transparent 66%), linear-gradient(180deg, #fff6df, #fdf0d1); } body.award .cert::after { background: radial-gradient(circle, rgba(245, 95, 154, 0.56) 0 3px, transparent 4px), radial-gradient(circle, rgba(0, 184, 176, 0.5) 0 3px, transparent 4px), linear-gradient(90deg, var(--line) 1px, transparent 1px), linear-gradient(0deg, var(--line) 1px, transparent 1px); background-size: 52px 52px, 52px 52px, 34px 34px, 34px 34px; background-position: 0 0, 26px 26px, 0 0, 0 0; } body.award .kicker, body.award .print-btn { background: var(--pink); } body.award .corner.tl { background: #ff805f; } body.award .corner.tr { background: #42d3c8; } body.award .corner.bl { background: #ffdd62; } body.award .corner.br { background: #c6b9ff; } .rosette { width: 132px; height: 132px; margin: 18px auto 24px; position: relative; isolation: isolate; } .rosette .burst { position: absolute; inset: 0; z-index: 1; border: 3px solid var(--ink); border-radius: 44% 56% 54% 46% / 38% 45% 55% 62%; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.72), transparent 24%), var(--sun); box-shadow: 5px 5px 0 0 var(--ink); animation: wobble 7s ease-in-out infinite; } .rosette .burst::after { content: ""; position: absolute; inset: 14px; border: 1.5px dashed rgba(8, 21, 29, 0.44); border-radius: 46% 54% 52% 48% / 44% 42% 58% 56%; } .rosette .disc { position: absolute; inset: 28px; z-index: 3; display: grid; place-items: center; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--paper); font-size: 2.15rem; } .rosette .tail { position: absolute; bottom: -20px; left: 50%; z-index: 0; width: 26px; height: 42px; border: 2.5px solid var(--ink); background: var(--coral); } .rosette .tail.l { transform: translateX(-112%) rotate(-13deg); } .rosette .tail.r { transform: translateX(10%) rotate(13deg); background: var(--teal); } @keyframes wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } body.finisher .emblem::before { background: var(--teal); } body.finisher h1 .title, body.finisher h1 .accent { color: var(--ocean); } body.finisher .emblem { width: 106px; height: 106px; margin: 14px auto 8px; } body.finisher h1 { font-size: clamp(2.35rem, 4.8vw, 4.25rem); } body.finisher .subtitle { margin-bottom: 16px; } body.finisher .name { min-height: 3.6rem; margin-bottom: 10px; } body.finisher .signoff { margin-top: 18px; } @media screen and (max-width: 760px) { body { padding: 16px; } .cert { min-height: 720px; aspect-ratio: auto; padding: 86px 24px 42px; border-radius: 22px; } .corner { width: 58px; height: 58px; border-radius: 16px; font-size: 1.1rem; } .corner.tl, .corner.tr { top: 18px; } .corner.bl, .corner.br { bottom: 18px; } .corner.tl, .corner.bl { left: 18px; } .corner.tr, .corner.br { right: 18px; } .kicker { max-width: 72%; font-size: 0.62rem; letter-spacing: 0.16em; } .emblem, .rosette { width: 108px; height: 108px; } h1 { font-size: clamp(2.1rem, 13vw, 3.8rem); } .name { width: 88%; font-size: clamp(2rem, 11vw, 3.4rem); } .signoff { grid-template-columns: 1fr; gap: 24px; margin-top: 28px; } } @media print { @page { size: A5 landscape; margin: 0; } html, body { width: 210mm; height: 148mm; margin: 0; padding: 0; background: #fff !important; color: #111; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cert { width: 210mm; height: 148mm; max-width: none; min-height: 0; margin: 0; padding: 0; aspect-ratio: auto; display: block; position: relative; overflow: hidden; background: #fff !important; border: none; border-radius: 0; box-shadow: none; page-break-inside: avoid; break-inside: avoid; page-break-after: avoid; } /* Outer hairline frame, safe inside the printable area */ .cert::before { content: ""; position: absolute; inset: 6mm; border: 1.4px solid #111; border-radius: 4mm; pointer-events: none; } .cert::after, .rays, .kicker, .corner, .print-btn, .hint { display: none !important; } /* Brand logo: top-left of the header band, no longer over the title */ .brand-logo { display: block; position: absolute; top: 12mm; left: 18mm; z-index: 5; width: 15mm; height: 15mm; margin: 0; border: 1.2px solid #111; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.35); } .brand-logo-left { left: 18mm; } .brand-logo-right { display: none !important; } .inner { position: relative; height: 100%; padding: 34mm 18mm 13mm; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; } /* SUNSET DUCKIES wordmark, sitting next to the logo */ .inner::before { content: "SUNSET\A DUCKIES"; display: block !important; position: absolute; top: 14mm; left: 36mm; width: auto; height: auto; margin: 0; padding: 0; background: none; color: #111; font-family: "Sunset Anton", Impact, "Arial Black", sans-serif; font-size: 0.95rem; font-weight: 900; letter-spacing: 0.02em; line-height: 0.95; text-align: left; text-transform: uppercase; white-space: pre; } /* Tagline, top-right */ .inner::after { content: "Salty hair. Real grit. No cap."; display: block !important; position: absolute; top: 16.5mm; right: 18mm; width: auto; height: auto; margin: 0; padding: 0; background: none; color: #111; font-family: "Sunset Anton", Impact, "Arial Black", sans-serif; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.04em; line-height: 1; text-align: right; text-transform: uppercase; white-space: nowrap; } .emblem, .rosette { width: 12mm; height: 12mm; margin: 0 0 2.5mm; flex-shrink: 0; } .emblem { font-size: 1.35rem; filter: grayscale(1) contrast(1.25); } .emblem::before { border: 1.4px solid #111; border-radius: 50%; background: #fff !important; box-shadow: none; transform: none; } .rosette .tail, .rosette .burst::after { display: none; } .rosette .burst { inset: 0; border: 1.4px solid #111; border-radius: 50%; background: #fff !important; box-shadow: none; animation: none; } .rosette .disc { inset: 1.6mm; border: 1.2px solid #111; background: #fff !important; font-size: 1.2rem; filter: grayscale(1) contrast(1.25); } .eyebrow, .awarded, .subtitle, .sig { color: #444 !important; } .eyebrow { margin: 0 0 1.5mm; font-size: 0.55rem; letter-spacing: 0.22em; } h1 { max-width: 170mm; margin: 0 auto 2mm; font-family: "Bricolage Grotesque", sans-serif; font-size: 2rem; font-weight: 800; line-height: 0.96; letter-spacing: -0.02em; } h1 .title, h1 .accent { color: #111 !important; font-family: "Fraunces", serif; font-style: italic; font-weight: 700; } .subtitle { margin: 0 0 4mm; font-size: 0.55rem; letter-spacing: 0.2em; } .awarded { margin: 0 0 1mm; font-size: 0.55rem; letter-spacing: 0.22em; } .name { width: 140mm; min-height: 13mm; margin: 0 auto 4mm; padding: 0 6mm 1.5mm; border-bottom: 1.4px solid #111; font-size: 1.85rem; font-style: italic; line-height: 1.05; } .blurb { position: relative; max-width: 158mm; margin: 0 auto; padding: 0; font-size: 0.74rem; line-height: 1.32; text-wrap: balance; } .blurb::before { content: "~ ~ ~"; display: block; margin: 0 auto 2.5mm; font-family: "Fraunces", serif; font-size: 0.9rem; font-style: italic; font-weight: 500; color: #888; letter-spacing: 0.2em; line-height: 1; } .signoff { width: 150mm; margin: auto auto 0; padding-top: 6mm; gap: 18mm; grid-template-columns: 1fr 1fr; } .sig { border-top: 1.2px solid #111; padding-top: 2.5mm; font-size: 0.5rem; letter-spacing: 0.18em; } .sig strong { margin-bottom: 1mm; font-size: 0.72rem; color: #111 !important; } body.finisher h1 { font-size: 1.95rem; } body.finisher .name { min-height: 12mm; } [contenteditable]:focus { outline: none; } }