/* ===== DOLPHIN HAS 2 STOMACHS — LIGHT THEME ===== */ /* Google Fonts loaded in each page */ :root { --ocean: #1565c0; --deep: #1976d2; --seafoam: #00897b; --seafoam-light: #b2dfdb; --accent: #0288d1; --bg: #f0f7ff; --bg-alt: #ffffff; --sand: #e8f4fd; --text: #1a2332; --text-muted: #546e7a; --white: #ffffff; --border: #cce3f5; --card-shadow: 0 2px 12px rgba(21,101,192,0.08); --radius: 12px; } *{margin:0;padding:0;box-sizing:border-box} body{ font-family:'Lora',Georgia,serif; background:var(--bg); color:var(--text); line-height:1.75; font-size:17px; } img{max-width:100%;height:auto;display:block} /* ===== NAV ===== */ nav{ background:#fff; border-bottom:2px solid var(--border); padding:0 20px; position:sticky; top:0; z-index:100; box-shadow:0 2px 8px rgba(21,101,192,0.07); } .nav-inner{ max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:60px; } .nav-logo{ font-family:'Nunito',Arial,sans-serif; font-weight:800; font-size:18px; color:var(--ocean); text-decoration:none; display:flex; align-items:center; gap:6px; white-space:nowrap; } .nav-logo span{color:var(--seafoam)} .nav-links{display:flex;gap:2px;list-style:none} .nav-links a{ color:var(--text-muted); text-decoration:none; font-family:'Nunito',Arial,sans-serif; font-size:13px; font-weight:700; padding:7px 11px; border-radius:8px; transition:background .18s,color .18s; white-space:nowrap; } .nav-links a:hover{background:var(--sand);color:var(--ocean)} /* Hamburger */ .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px} .hamburger span{display:block;width:22px;height:2px;background:var(--ocean);border-radius:2px} .mobile-menu{display:none;background:#fff;border-top:1px solid var(--border);padding:8px 20px 16px} .mobile-menu.open{display:block} .mobile-menu a{ display:block; color:var(--text); text-decoration:none; font-family:'Nunito',Arial,sans-serif; font-size:15px; font-weight:700; padding:11px 0; border-bottom:1px solid var(--border); } .mobile-menu a:last-child{border-bottom:none} /* ===== HERO ===== */ .hero{ background:linear-gradient(135deg,#e3f2fd 0%,#e8f5e9 100%); border-bottom:2px solid var(--border); padding:64px 20px 56px; text-align:center; } .hero-badge{ display:inline-block; background:var(--seafoam-light); color:var(--seafoam); font-family:'Nunito',Arial,sans-serif; font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:5px 14px; border-radius:20px; margin-bottom:18px; } .hero h1{ font-size:clamp(26px,5vw,50px); font-weight:700; line-height:1.2; color:var(--ocean); margin-bottom:16px; max-width:760px; margin-left:auto; margin-right:auto; } .hero h1 em{color:var(--seafoam);font-style:normal} .hero p{ font-size:clamp(15px,2vw,18px); color:var(--text-muted); max-width:540px; margin:0 auto 28px; font-family:'Nunito',Arial,sans-serif; } .hero-stats{display:flex;justify-content:center;gap:28px;flex-wrap:wrap} .hero-stat{text-align:center} .hero-stat strong{display:block;font-size:26px;color:var(--ocean);font-family:'Nunito',Arial,sans-serif;font-weight:800} .hero-stat span{font-size:12px;color:var(--text-muted);font-family:'Nunito',Arial,sans-serif} /* ===== FACTS STRIP ===== */ .facts-strip{background:var(--ocean);padding:16px 20px} .facts-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; } .fact-item{ background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18); border-radius:8px; padding:9px 10px; text-align:center; } .fact-item .fact-emoji{font-size:18px;display:block;margin-bottom:3px} .fact-item span{font-family:'Nunito',Arial,sans-serif;font-size:11px;color:rgba(255,255,255,0.92);font-weight:700} /* ===== SECTIONS ===== */ .section{padding:56px 20px} .section-alt{background:var(--bg-alt)} .container{max-width:1100px;margin:0 auto} .section-title{font-size:clamp(20px,3.5vw,32px);color:var(--ocean);margin-bottom:8px;font-weight:700} .section-sub{color:var(--text-muted);font-family:'Nunito',Arial,sans-serif;font-size:14px;margin-bottom:32px} .eyebrow{ font-family:'Nunito',Arial,sans-serif; font-size:11px;font-weight:800; letter-spacing:2.5px;text-transform:uppercase; color:var(--seafoam);margin-bottom:8px; display:block; } /* ===== CARDS ===== */ .cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .card{ background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--card-shadow); text-decoration:none; color:inherit; display:block; border:1px solid var(--border); transition:transform .2s,box-shadow .2s; } .card:hover{transform:translateY(-3px);box-shadow:0 6px 24px rgba(21,101,192,0.13)} .card-img{width:100%;height:180px;object-fit:cover;display:block} .card-body{padding:18px} .card-tag{ font-family:'Nunito',Arial,sans-serif; font-size:11px;font-weight:800; letter-spacing:1.5px;text-transform:uppercase; color:var(--seafoam);margin-bottom:6px; } .card h3{font-size:16px;color:var(--ocean);margin-bottom:7px;line-height:1.35} .card p{font-size:13px;color:var(--text-muted);font-family:'Nunito',Arial,sans-serif;line-height:1.5} .card-meta{font-family:'Nunito',Arial,sans-serif;font-size:12px;color:var(--text-muted);margin-top:10px} /* ===== TOOLS ===== */ .tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .tool-card{ background:linear-gradient(135deg,var(--ocean),var(--accent)); border-radius:var(--radius); padding:24px 20px; color:#fff; text-decoration:none; display:block; transition:transform .2s,box-shadow .2s; box-shadow:var(--card-shadow); } .tool-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(21,101,192,0.2)} .tool-icon{font-size:32px;margin-bottom:12px} .tool-card h3{font-size:17px;margin-bottom:7px;color:#fff;font-family:'Nunito',Arial,sans-serif;font-weight:800} .tool-card p{font-size:13px;color:rgba(255,255,255,0.82);font-family:'Nunito',Arial,sans-serif} .tool-card .tool-cta{ display:inline-block;margin-top:14px; background:#fff;color:var(--ocean); font-family:'Nunito',Arial,sans-serif; font-size:12px;font-weight:800; padding:7px 16px;border-radius:20px; } /* ===== ARTICLE PAGE ===== */ .article-hero{ background:linear-gradient(135deg,#e3f2fd,#e0f2f1); border-bottom:2px solid var(--border); padding:52px 20px 44px; text-align:center; } .article-hero h1{font-size:clamp(22px,4vw,40px);max-width:740px;margin:0 auto 14px;color:var(--ocean);line-height:1.25} .article-hero .meta{font-family:'Nunito',Arial,sans-serif;font-size:13px;color:var(--text-muted)} .article-hero .meta span{margin:0 8px} .article-layout{max-width:800px;margin:0 auto;padding:44px 20px 60px} .article-layout img.hero-img{ width:100%;height:320px;object-fit:cover; border-radius:var(--radius);margin-bottom:32px; } .article-layout h2{font-size:22px;color:var(--ocean);margin:32px 0 10px} .article-layout h3{font-size:19px;color:var(--deep);margin:24px 0 8px} .article-layout p{margin-bottom:16px} .article-layout ul,.article-layout ol{padding-left:22px;margin-bottom:16px} .article-layout li{margin-bottom:7px} .article-layout table{ width:100%;border-collapse:collapse; margin:22px 0; font-family:'Nunito',Arial,sans-serif;font-size:14px; border-radius:var(--radius);overflow:hidden; box-shadow:var(--card-shadow); } .article-layout th{background:var(--ocean);color:#fff;padding:11px 13px;text-align:left} .article-layout td{padding:10px 13px;border-bottom:1px solid var(--border)} .article-layout tr:nth-child(even) td{background:var(--sand)} .article-layout .highlight-box{ background:var(--sand); border-left:4px solid var(--seafoam); border-radius:0 8px 8px 0; padding:16px 20px; margin:22px 0; font-style:italic; color:var(--text-muted); } /* ===== RELATED ===== */ .related-section{background:var(--sand);padding:44px 20px} .related-grid{max-width:1100px;margin:0 auto} .related-grid .cards-grid{grid-template-columns:repeat(3,1fr)} /* ===== TOOL PAGE ===== */ .tool-hero{ background:linear-gradient(135deg,#e3f2fd,#e0f2f1); border-bottom:2px solid var(--border); padding:46px 20px 40px;text-align:center; } .tool-hero h1{font-size:clamp(20px,4vw,36px);color:var(--ocean);margin-bottom:8px} .tool-hero p{color:var(--text-muted);font-family:'Nunito',Arial,sans-serif;max-width:500px;margin:0 auto;font-size:15px} .tool-container{max-width:680px;margin:40px auto;padding:0 20px 56px} .tool-box{ background:#fff;border-radius:var(--radius); padding:32px;box-shadow:var(--card-shadow); border:1px solid var(--border); } .tool-box label{ display:block; font-family:'Nunito',Arial,sans-serif; font-size:13px;font-weight:800; color:var(--ocean);margin-bottom:7px; } .tool-box input,.tool-box select{ width:100%;padding:11px 14px; border:2px solid var(--border);border-radius:8px; font-size:15px;color:var(--text); background:var(--bg);margin-bottom:18px; font-family:'Nunito',Arial,sans-serif; transition:border-color .18s; } .tool-box input:focus,.tool-box select:focus{outline:none;border-color:var(--seafoam)} .tool-btn{ width:100%;background:var(--ocean);color:#fff;border:none; padding:13px;border-radius:8px;font-size:15px; font-weight:700;font-family:'Nunito',Arial,sans-serif; cursor:pointer;transition:background .18s; } .tool-btn:hover{background:var(--deep)} .tool-result{ margin-top:22px; background:linear-gradient(135deg,var(--ocean),var(--accent)); color:#fff;border-radius:var(--radius); padding:22px;text-align:center;display:none; } .tool-result.show{display:block} .tool-result .result-number{font-size:40px;font-weight:700;color:#fff;font-family:'Nunito',Arial,sans-serif} .tool-result .result-label{font-family:'Nunito',Arial,sans-serif;font-size:14px;color:rgba(255,255,255,0.85);margin-top:5px} .quiz-option{ display:block;width:100%;text-align:left; background:var(--bg);border:2px solid var(--border); border-radius:8px;padding:12px 16px;margin-bottom:9px; cursor:pointer;font-size:15px;font-family:'Nunito',Arial,sans-serif; transition:border-color .18s,background .18s; } .quiz-option:hover{border-color:var(--seafoam);background:var(--seafoam-light)} .quiz-option.correct{border-color:#2e7d32;background:#e8f5e9} .quiz-option.wrong{border-color:#c62828;background:#ffebee} /* ===== PAGE HERO ===== */ .page-hero{ background:linear-gradient(135deg,#e3f2fd,#e0f2f1); border-bottom:2px solid var(--border); padding:46px 20px 40px;text-align:center; } .page-hero h1{font-size:clamp(22px,4vw,38px);color:var(--ocean);margin-bottom:8px} .page-hero p{color:var(--text-muted);font-family:'Nunito',Arial,sans-serif} .page-content{max-width:800px;margin:0 auto;padding:44px 20px 60px} .page-content h2{font-size:20px;color:var(--ocean);margin:28px 0 9px} .page-content p{margin-bottom:14px} /* Contact Form */ .contact-form{background:#fff;border-radius:var(--radius);padding:32px;box-shadow:var(--card-shadow);border:1px solid var(--border)} .form-group{margin-bottom:18px} .form-group label{display:block;font-family:'Nunito',Arial,sans-serif;font-size:13px;font-weight:800;color:var(--ocean);margin-bottom:6px} .form-group input,.form-group textarea{ width:100%;padding:11px 14px;border:2px solid var(--border); border-radius:8px;font-size:15px;color:var(--text); background:var(--bg);font-family:'Lora',Georgia,serif; transition:border-color .18s; } .form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--seafoam)} .form-group textarea{height:130px;resize:vertical} .submit-btn{ background:var(--ocean);color:#fff;border:none; padding:13px 32px;border-radius:8px; font-size:15px;font-weight:700; font-family:'Nunito',Arial,sans-serif;cursor:pointer; } /* ===== FOOTER ===== */ footer{background:var(--ocean);color:rgba(255,255,255,0.88);padding:48px 20px 24px} .footer-grid{ max-width:1100px;margin:0 auto; display:grid;grid-template-columns:2fr 1fr 1fr 1fr; gap:32px;margin-bottom:36px; } .footer-brand p{font-size:13px;color:rgba(255,255,255,0.65);margin-top:10px;line-height:1.6;font-family:'Nunito',Arial,sans-serif} .footer-brand .brand-name{font-size:17px;font-weight:800;color:#fff;font-family:'Nunito',Arial,sans-serif} .footer-brand .brand-name span{color:#80cbc4} .footer-col h4{ font-family:'Nunito',Arial,sans-serif; font-size:11px;font-weight:800; letter-spacing:2px;text-transform:uppercase; color:#80cbc4;margin-bottom:14px; } .footer-col ul{list-style:none} .footer-col ul li{margin-bottom:9px} .footer-col ul li a{ color:rgba(255,255,255,0.72);text-decoration:none; font-family:'Nunito',Arial,sans-serif;font-size:13px; transition:color .18s; } .footer-col ul li a:hover{color:#fff} .footer-bottom{ max-width:1100px;margin:0 auto; border-top:1px solid rgba(255,255,255,0.12); padding-top:18px;text-align:center; font-family:'Nunito',Arial,sans-serif; font-size:12px;color:rgba(255,255,255,0.45); } /* ===== RESPONSIVE ===== */ @media(max-width:900px){ .cards-grid{grid-template-columns:repeat(2,1fr)} .tools-grid{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr} .facts-grid{grid-template-columns:repeat(3,1fr)} .related-grid .cards-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:600px){ .nav-links{display:none} .hamburger{display:flex} .cards-grid{grid-template-columns:1fr} .tools-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .facts-grid{grid-template-columns:repeat(2,1fr)} .hero{padding:44px 16px 48px} .article-layout{padding:32px 16px 48px} .article-layout img.hero-img{height:220px} .related-grid .cards-grid{grid-template-columns:1fr} .tool-box{padding:22px 16px} .page-content{padding:32px 16px 48px} }