/* GreetingGrams.com — "Sunny Postcard" theme Evolved from the original 2000s palette: pale-yellow page (#FFF4AD), bright blue category headers (#006DF4), red accents, gold promo boxes. Bulma 1.0 handles layout; this sheet is brand color, type and postcard motifs. */ :root { --gg-paper: #FFF6CD; --gg-ink: #33302a; --gg-ink-soft: #6b6354; --gg-blue: #0667e0; --gg-blue-dark: #0a4fa8; --gg-blue-light: #e4eeff; --gg-coral: #e2492f; --gg-coral-light: #fbe9e5; --gg-gold: #ffd23f; --gg-gold-deep: #b97f06; --gg-gold-light: #fff3c7; --gg-teal: #15889c; --gg-teal-light: #e0f5f8; --gg-pink: #d83a72; --gg-pink-light: #fbe6ee; --gg-violet: #7c4ec7; --gg-violet-light: #f0eafa; --gg-green: #2e8a52; --gg-green-light: #e5f4eb; --gg-slate: #4e6076; --gg-slate-light: #edf1f5; --gg-navy: #122e57; --gg-radius: 16px; --gg-shadow: 0 10px 30px -12px rgba(81, 60, 10, 0.35); } /* Per-category accent (set as a class on ) */ body.cat-home { --gg-cat: var(--gg-blue); --gg-cat-light: var(--gg-blue-light); } body.cat-jokes { --gg-cat: var(--gg-coral); --gg-cat-light: var(--gg-coral-light); } body.cat-birthday { --gg-cat: var(--gg-blue); --gg-cat-light: var(--gg-blue-light); } body.cat-occasions{ --gg-cat: var(--gg-teal); --gg-cat-light: var(--gg-teal-light); } body.cat-fun { --gg-cat: var(--gg-violet); --gg-cat-light: var(--gg-violet-light); } body.cat-love { --gg-cat: var(--gg-pink); --gg-cat-light: var(--gg-pink-light); } body.cat-friends { --gg-cat: var(--gg-gold-deep); --gg-cat-light: var(--gg-gold-light); } body.cat-forwards { --gg-cat: var(--gg-green); --gg-cat-light: var(--gg-green-light); } body.cat-utility { --gg-cat: var(--gg-blue-dark); --gg-cat-light: var(--gg-slate-light); } body.cat-memorial { --gg-cat: var(--gg-slate); --gg-cat-light: var(--gg-slate-light); } html { scroll-behavior: smooth; } body { font-family: 'Nunito', 'Segoe UI', sans-serif; color: var(--gg-ink); background-color: var(--gg-paper); background-image: radial-gradient(rgba(217, 167, 38, 0.16) 1px, transparent 1.4px); background-size: 26px 26px; } img { max-width: 100%; height: auto; } h1, h2, h3, h4, .gg-brand-name, .navbar-item, .button { font-family: 'Baloo 2', 'Nunito', sans-serif; } /* ---------- Airmail stripe motif ---------- */ .gg-airmail { height: 9px; background: repeating-linear-gradient( 135deg, var(--gg-coral) 0 14px, #ffffff 14px 26px, var(--gg-blue) 26px 40px, #ffffff 40px 52px ); } /* ---------- Navbar ---------- */ .gg-navbar { background: #fffdf4; box-shadow: 0 3px 14px -6px rgba(81, 60, 10, 0.35); } .gg-navbar .navbar-item { font-weight: 700; color: var(--gg-ink); } .gg-navbar a.navbar-item:hover, .gg-navbar a.navbar-item:focus { background: var(--gg-gold-light); color: var(--gg-blue-dark); } .gg-navbar a.navbar-item.is-current { color: var(--gg-blue); box-shadow: inset 0 -4px 0 var(--gg-gold); } .gg-navbar .navbar-menu { background: #fffdf4; } .gg-brand { gap: 0.55rem; } .gg-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 9px; background: var(--gg-blue); color: var(--gg-gold); font-size: 1.05rem; transform: rotate(-6deg); box-shadow: 2px 2px 0 var(--gg-gold); } .gg-brand-name { font-size: 1.45rem; font-weight: 800; color: var(--gg-ink); letter-spacing: -0.02em; } .gg-brand-name span { color: var(--gg-blue); } .navbar-burger { color: var(--gg-ink); } /* ---------- Hero band ---------- */ .gg-hero { background: linear-gradient(180deg, var(--gg-cat-light) 0%, rgba(255, 255, 255, 0) 130%), radial-gradient(rgba(255, 255, 255, 0.65) 1px, transparent 1.4px); background-size: auto, 22px 22px; border-bottom: 4px solid var(--gg-cat); padding: 3.5rem 1.5rem 3rem; } .gg-hero h1 { font-size: clamp(2.05rem, 4.5vw, 3.1rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; color: #2a2520; margin: 0.65rem 0 0.85rem; } .gg-kicker { display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; color: var(--gg-cat); border: 2px solid var(--gg-cat); border-radius: 999px; padding: 0.3rem 1rem; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; font-family: 'Baloo 2', sans-serif; } .gg-lede { max-width: 46rem; font-size: 1.16rem; color: var(--gg-ink-soft); } .gg-hero .buttons { margin-top: 1.6rem; } /* ---------- Postcard image frame ---------- */ .gg-postcard-wrap { margin-top: -1.75rem; padding: 0 1.5rem; } .gg-postcard { position: relative; max-width: 880px; margin: 0 auto; background: #fff; padding: 12px 12px 16px; border-radius: 14px; box-shadow: var(--gg-shadow); transform: rotate(-1.3deg); } .gg-postcard img { display: block; border-radius: 7px; } .gg-postcard::before { content: ""; position: absolute; inset: 5px; border: 2px dashed rgba(0, 0, 0, 0.12); border-radius: 10px; pointer-events: none; } .gg-postcard::after { /* washi tape */ content: ""; position: absolute; top: -14px; left: 50%; width: 130px; height: 30px; transform: translateX(-50%) rotate(2.5deg); background: linear-gradient(90deg, rgba(255, 210, 63, 0.85), rgba(255, 210, 63, 0.65)); box-shadow: 0 2px 4px rgba(81, 60, 10, 0.18); } .gg-hero .gg-postcard { transform: rotate(1.6deg); margin-top: 0.5rem; } /* ---------- Article panel ---------- */ .gg-article { padding-top: 3rem; } .gg-panel { max-width: 860px; margin: 0 auto; background: #fff; border-radius: var(--gg-radius); box-shadow: var(--gg-shadow); padding: clamp(1.6rem, 4vw, 3rem); } .gg-panel.content h2 { font-family: 'Baloo 2', sans-serif; font-weight: 800; color: var(--gg-cat); letter-spacing: -0.01em; margin-top: 2.2rem; } .gg-panel.content h2:first-child { margin-top: 0; } .gg-panel.content h3 { font-family: 'Baloo 2', sans-serif; color: var(--gg-ink); } .gg-panel.content p, .gg-panel.content li { font-size: 1.07rem; line-height: 1.75; } .gg-panel.content strong { color: #2a2520; } .gg-panel.content a { color: var(--gg-blue); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gg-gold); text-decoration-thickness: 2px; text-underline-offset: 2px; } .gg-panel.content a:hover { color: var(--gg-blue-dark); text-decoration-color: var(--gg-cat); } .gg-panel.content ul li::marker { color: var(--gg-cat); } .gg-panel.content ol li::marker { color: var(--gg-cat); font-weight: 800; } .gg-panel.content blockquote { border-left: 4px solid var(--gg-cat); background: var(--gg-cat-light); border-radius: 0 10px 10px 0; } /* ---------- Share box ---------- */ .gg-share { max-width: 860px; margin: 2rem auto 0; background: var(--gg-gold-light); border: 3px dashed var(--gg-cat); border-radius: var(--gg-radius); padding: 1.8rem 2rem; } .gg-share h2 { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.4rem; color: #2a2520; margin-bottom: 0.4rem; } .gg-share h2 .fa-solid { color: var(--gg-cat); margin-right: 0.4rem; } .gg-share p { color: var(--gg-ink-soft); margin-bottom: 1.1rem; } .gg-share.is-quiet { background: var(--gg-slate-light); } /* ---------- Buttons ---------- */ .button.gg-btn-cat { background: var(--gg-cat); border-color: transparent; color: #fff; border-radius: 999px; font-weight: 700; padding-left: 1.4em; padding-right: 1.4em; } .button.gg-btn-cat:hover { filter: brightness(1.08); color: #fff; transform: translateY(-1px); } .button.gg-btn-outline { background: #fff; color: var(--gg-cat); border: 2px solid var(--gg-cat); border-radius: 999px; font-weight: 700; padding-left: 1.4em; padding-right: 1.4em; } .button.gg-btn-outline:hover { background: var(--gg-cat-light); color: var(--gg-cat); } .button.gg-btn-gold { background: var(--gg-gold); color: #5a4304; border-color: transparent; border-radius: 999px; font-weight: 800; } .button.gg-btn-gold:hover { background: #ffc81d; color: #4a3703; } /* ---------- Related chips ---------- */ .gg-related { max-width: 860px; margin: 1.6rem auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; } .gg-related-label { font-weight: 800; font-family: 'Baloo 2', sans-serif; color: var(--gg-ink-soft); } .gg-chip { display: inline-block; background: #fff; color: var(--gg-blue-dark); border: 2px solid rgba(10, 79, 168, 0.25); border-radius: 999px; padding: 0.32rem 1rem; font-weight: 700; font-size: 0.95rem; } .gg-chip:hover { border-color: var(--gg-cat); color: var(--gg-cat); background: var(--gg-cat-light); } /* ---------- Homepage category tiles ---------- */ .gg-cats { padding-top: 3rem; padding-bottom: 0.5rem; } .gg-cat-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; height: 100%; background: #fff; border-radius: var(--gg-radius); box-shadow: var(--gg-shadow); border-bottom: 5px solid var(--tile, var(--gg-blue)); padding: 1.5rem 1rem; text-align: center; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--gg-ink); transition: transform 0.15s ease; } .gg-cat-tile .fa-solid { font-size: 1.7rem; color: var(--tile, var(--gg-blue)); } .gg-cat-tile:hover { transform: translateY(-4px) rotate(-1deg); color: var(--tile, var(--gg-blue)); } .tile-coral { --tile: var(--gg-coral); } .tile-blue { --tile: var(--gg-blue); } .tile-teal { --tile: var(--gg-teal); } .tile-violet { --tile: var(--gg-violet); } .tile-pink { --tile: var(--gg-pink); } .tile-gold { --tile: var(--gg-gold-deep); } .tile-green { --tile: var(--gg-green); } .tile-slate { --tile: var(--gg-slate); } /* ---------- Footer ---------- */ .gg-footer { background: var(--gg-navy); color: #cfe0f7; padding: 3.5rem 1.5rem 2.5rem; } .gg-footer h4 { color: var(--gg-gold); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.9rem; } .gg-footer a { color: #e8f0fc; font-weight: 600; } .gg-footer a:hover { color: var(--gg-gold); } .gg-footer ul li { margin-bottom: 0.45rem; } .gg-footer .gg-brand-name { color: #fff; } .gg-footer .gg-brand-name span { color: var(--gg-gold); } .gg-footer p { color: #b8cdeb; } .gg-copyright { border-top: 1px solid rgba(255, 255, 255, 0.18); margin-top: 2.5rem; padding-top: 1.5rem; text-align: center; font-size: 0.95rem; } /* ---------- 404 ---------- */ .gg-404 { text-align: center; padding: 5rem 1.5rem; } .gg-404 .gg-404-code { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(4rem, 12vw, 7rem); line-height: 1; color: var(--gg-blue); } .gg-404 .gg-404-code .fa-solid { color: var(--gg-coral); font-size: 0.8em; margin: 0 0.15em; transform: rotate(-8deg); } /* ---------- Responsive tweaks ---------- */ @media (max-width: 768px) { .gg-hero { padding: 2.4rem 1rem 2.2rem; } .gg-postcard { transform: rotate(0deg); } .gg-share { padding: 1.4rem 1.2rem; } }