/*========================================================= CLD PoE Tree in Air Mobile Stylesheet =========================================================*/ /*========================================================= RESET =========================================================*/ *{ margin:0; padding:0; box-sizing:border-box; } /*========================================================= ROOT VARIABLES =========================================================*/ :root{ --blue:#0073E6; --darkBlue:#004D99; --yellow:#FFE84A; --green:#008000; --red:#C00000; --grey:#555555; --borderGrey:#DDDDDD; --white:#FFFFFF; --font: "Trebuchet MS", "Segoe UI", Arial, sans-serif; --fsIntro:26px; --fsTechnology:34px; --fsMainTitle:44px; --fsSubtitle:22px; --fsSection:30px; --fsBody:20px; --fsCaption:18px; --radius:14px; --shadow: 0 8px 22px rgba(0,0,0,.10); } /*========================================================= HTML =========================================================*/ html{ scroll-behavior:smooth; } /*========================================================= BODY =========================================================*/ body{ background:#ffffff; color:#222; font-family:var(--font); overflow-x:hidden; } /*========================================================= PAGE =========================================================*/ .page{ width:100%; max-width:430px; margin:auto; padding:18px; } /*========================================================= IMAGES =========================================================*/ img{ display:block; max-width:100%; height:auto; user-select:none; -webkit-user-drag:none; } /*========================================================= LINKS =========================================================*/ a{ text-decoration:none; color:inherit; } /*========================================================= COMMON =========================================================*/ h1, h2, h3{ line-height:1.25; } p{ line-height:1.65; } section{ margin-bottom:56px; } /*========================================================= HEADER =========================================================*/ .header{ margin-bottom:36px; } /*========================================================= CAMERA =========================================================*/ .camera-area{ display:flex; justify-content:flex-end; margin-bottom:10px; } .camera-image{ width:120px; } /*========================================================= INTRO =========================================================*/ .intro-area{ width:100%; } .intro-text{ text-align:left; font-size:var(--fsIntro); font-style:italic; color:var(--grey); } /*========================================================= HERO =========================================================*/ .hero{ text-align:center; margin-bottom:42px; } /*========================================================= TECHNOLOGY =========================================================*/ .technology-heading{ color:var(--darkBlue); font-size:30px; line-height:1.35; margin-bottom:32px; } .technology-sub{ display:block; } /*========================================================= MAIN TITLE =========================================================*/ .main-heading{ color:var(--blue); font-size:32px; font-weight:800; line-height:1.18; margin-bottom:16px; } /*========================================================= SUB TITLE =========================================================*/ .sub-heading{ font-size:var(--fsSubtitle); color:#666; line-height:1.5; } /*========================================================= STRIKE =========================================================*/ .strike{ position:relative; display:inline-block; } .strike::after{ content:""; position:absolute; left:-2px; right:-2px; top:52%; height:3px; background:var(--red); transform:rotate(-5deg); } /*========================================================= FEATURE BOX =========================================================*/ .feature-box{ background:var(--yellow); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); } .feature-box p{ font-size:var(--fsBody); margin-bottom:16px; } .feature-box p:last-child{ margin-bottom:0; } .feature-box strong{ color:var(--darkBlue); } /*========================================================= COMMON HELPERS =========================================================*/ .base-word{ color:var(--blue); } .tree-word{ color:var(--green); } .changed-word{ font-style:italic; font-weight:800; font-size:1.08em; } .explore-word{ font-weight:400; } .explore-product{ font-weight:400; } /*========================================================= PRODUCT SECTION =========================================================*/ .product-section{ margin-top:20px; margin-bottom:60px; } /*========================================================= PRODUCT TITLE =========================================================*/ .product-title{ text-align:center; font-size:24px; font-weight:700; color:#444; line-height:1.45; margin-bottom:36px; } /*========================================================= PRODUCT LAYOUT =========================================================*/ .product-layout{ display:flex; flex-direction:column; gap:42px; } /*========================================================= COMMON PRODUCT PANELS =========================================================*/ .bases-panel, .trees-panel, .size-panel{ width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; } /*========================================================= FIGURE =========================================================*/ figure{ margin:0; } /*========================================================= BASE IMAGE =========================================================*/ .bases-image{ width:100%; max-width:315px; } .bases-caption{ margin-top:18px; text-align:center; font-size:16px; font-weight:600; color:var(--blue); line-height:1.6; } /*========================================================= TREE IMAGES =========================================================*/ .tree5-image, .tree8-image{ width:82%; max-width:240px; margin:auto; } .tree8-image{ margin-top:30px; } /*========================================================= TREE CAPTION =========================================================*/ .tree-caption{ margin-top:14px; margin-bottom:18px; text-align:center; font-size:24px; font-weight:700; color:var(--green); } /*========================================================= SIZE IMAGE =========================================================*/ .size-image{ width:88%; max-width:270px; } /*========================================================= SIZE CAPTION =========================================================*/ .size-caption{ margin-top:18px; text-align:center; font-size:22px; font-weight:700; color:#444; } /*========================================================= ACHIEVEMENT =========================================================*/ .achievement-section{ text-align:center; margin-top:45px; } /*========================================================= INSTALLATION =========================================================*/ .installation-text{ font-size:20px; color:#666; font-style:italic; line-height:1.7; margin-bottom:24px; } /*========================================================= PATENT =========================================================*/ .patent-text{ font-size:20px; line-height:1.8; color:var(--red); font-weight:700; line-height:1.6; } .separator{ display:none; } /*========================================================= TAGLINE =========================================================*/ .tagline-section{ margin-top:50px; margin-bottom:55px; text-align:center; } .tagline{ display:inline-block; font-size:24px; line-height:1.5; font-weight:700; color:var(--blue); line-height:1.4; } /*========================================================= EXPLORE =========================================================*/ .explore-section{ text-align:center; margin-top:25px; margin-bottom:36px; } .explore-heading{ color:var(--blue); line-height:1.45; } .explore-word{ display:block; font-size:20px; font-weight:400; } .explore-product{ display:block; margin-top:8px; font-size:20px; font-weight:400; } /*========================================================= NAVIGATION =========================================================*/ .navigation-area{ width:100%; margin-top:20px; margin-bottom:60px; } /*========================================================= NAVIGATION GRID =========================================================*/ .navigation-grid{ display:grid; grid-template-columns:1fr; gap:16px; } /*========================================================= NAVIGATION BUTTON =========================================================*/ .nav-box{ display:flex; justify-content:center; align-items:center; width:100%; min-height:62px; padding:16px; background:var(--blue); color:#ffffff; font-size:22px; font-weight:600; text-align:center; border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,.10); transition: background .25s ease, transform .20s ease, box-shadow .25s ease; } /*========================================================= BUTTON HOVER =========================================================*/ .nav-box:hover{ background:var(--darkBlue); } /*========================================================= BUTTON ACTIVE =========================================================*/ .nav-box:active{ transform:scale(.98); } /*========================================================= FOOTER =========================================================*/ .footer{ margin-top:30px; padding-top:30px; padding-bottom:45px; border-top:1px solid var(--borderGrey); } /*========================================================= FOOTER CONTENT =========================================================*/ .footer-content{ display:flex; flex-direction:column; align-items:center; text-align:center; } /*========================================================= FOOTER LOGO =========================================================*/ .footer-logo{ width:120px; height:auto; } /*========================================================= SINCE =========================================================*/ .footer-since{ margin-top:6px; font-size:15px; font-weight:600; letter-spacing:4px; color:#666; } /*========================================================= COMPANY =========================================================*/ .footer-company{ margin-top:22px; font-size:18px; font-weight:700; color:var(--blue); } /*========================================================= ADDRESS =========================================================*/ .footer-address{ margin-top:10px; font-size:16px; color:#555; line-height:1.7; } /*========================================================= COPYRIGHT =========================================================*/ .footer-copy{ margin-top:22px; font-size:15px; color:#666; line-height:1.7; } /*========================================================= SMALL PHONES =========================================================*/ @media (max-width:390px){ :root{ --fsTechnology:30px; --fsMainTitle:38px; --fsSubtitle:20px; --fsSection:26px; --fsBody:18px; } .page{ padding:14px; } .camera-image{ width:105px; } .nav-box{ font-size:20px; min-height:58px; } .footer-logo{ width:110px; } } /*========================================================= LARGE PHONES =========================================================*/ @media (min-width:430px){ .page{ max-width:400px; } } /*========================================================= LANDSCAPE PHONES =========================================================*/ @media (orientation:landscape){ .page{ max-width:720px; } .product-layout{ gap:30px; } .navigation-grid{ grid-template-columns:repeat(2,1fr); } } /*========================================================= SELECTION =========================================================*/ ::selection{ background:var(--blue); color:#ffffff; } /*========================================================= TAP HIGHLIGHT =========================================================*/ a{ -webkit-tap-highlight-color:transparent; } /*========================================================= SMOOTH TRANSITIONS =========================================================*/ .nav-box, .footer-logo, .camera-image{ transition:.25s ease; } /*========================================================= UTILITY CLASSES =========================================================*/ .text-center{ text-align:center; } .hide{ display:none; } .show{ display:block; } /*========================================================= END OF MOBILE.CSS =========================================================*/