:root { /* --------------------------------------------------- init --------------------------------------------------- */ * { border-collapse: collapse; } /* --------------------------------------------------- padding/margin --------------------------------------------------- */ --xxxs: calc(1px + (2 - 1) * ((100vw - 320px) / (1200 - 320))); --xxs: calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320))); --xs: calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320))); --sm: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320))); --md: calc(18px + (36 - 18) * ((100vw - 320px) / (1200 - 320))); --lg: calc(24px + (48 - 24) * ((100vw - 320px) / (1200 - 320))); --xl: calc(30px + (60 - 30) * ((100vw - 320px) / (1200 - 320))); --xxl: calc(30px + (90 - 30) * ((100vw - 320px) / (1200 - 320))); --xxs-max: 6px; --xs-max: 12px; --sm-max: 24px; --md-max: 36px; --lg-max: 48px; --xl-max: 60px; --xxl-max: 90px; /* --------------------------------------------------- gap --------------------------------------------------- */ --gap-xxs: calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320))); --gap-xs: calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320))); --gap-sm: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320))); --gap-md: calc(18px + (36 - 18) * ((100vw - 320px) / (1200 - 320))); --gap-lg: calc(24px + (48 - 24) * ((100vw - 320px) / (1200 - 320))); --gap-xl: calc(30px + (60 - 30) * ((100vw - 320px) / (1200 - 320))); --gap-xxl: calc(30px + (90 - 30) * ((100vw - 320px) / (1200 - 320))); --gap-xxs-max: 6px; --gap-xs-max: 12px; --gap-sm-max: 24px; --gap-md-max: 36px; --gap-lg-max: 48px; --gap-xl-max: 60px; --gap-xxl-max: 90px; /* --------------------------------------------------- block width --------------------------------------------------- */ --block-width-xs: 680px; --block-width-sm: 840px; --block-width-md: 1020px; --block-width-lg: 1200px; --block-width-xl: 1400px; --block-width-xxl: 1600px; --block-width-full: 100%; /* --------------------------------------------------- radius --------------------------------------------------- */ --rad1:5px; --rad2:8px; --rad3:12px; /* --------------------------------------------------- basics [WIP] --------------------------------------------------- */ --link-col: #064771; --link-active-col: #E08000; --link-hover-col: #ccc; --btn1-col: #399A89; --btn1-hover-col: #348C7C; --btn1-text-col: #fff; /* --------------------------------------------------- style types --------------------------------------------------- */ --st-light-1-back-col: #fff; --st-light-1-text-col:#000; --st-light-1-link-col:#0095db; --st-light-1-link-decor: none; --st-light-1-link-hover-col: #064771; --st-light-1-link-hover-decor: underline; --st-light-2-back-col: #f1f1f1; --st-light-2-text-col:#000; --st-light-2-link-decor: none; --st-light-2-link-hover-col:#0095db; --st-light-3-back-col: rgb(255,255,255,.7); --st-light-3-text-col:#000; --st-light-3-blur: saturate(180%) blur(5px); --st-light-3-link-col:#0095db; --st-light-3-link-hover-col:#0095db; --st-light-3-link-hover-decor: underline; --st-medium-1-back-col: #ccc; --st-medium-1-text-col:#000; --st-dark-1-back-col: #0095db; --st-dark-1-text-col:#fff; --st-dark-1-link-col:#fff; --st-dark-1-link-hover-col:#fff; --st-dark-1-link-hover-decor: underline; /* --------------------------------------------------- border --------------------------------------------------- */ --br-1: 1px solid #444; --br-2: 2px solid #444; --br-3: 2px dotted #444; /* --------------------------------------------------- p --------------------------------------------------- */ --p-font:'Source Sans Pro', sans-serif; --p-font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1200 - 320))); --p-font-size-min:12px; --p-font-size-max:18px; --p-line-height: calc(14px + (20 - 14) * ((100vw - 320px) / (1200 - 320))); --p-line-height-min:14px; --p-line-height-max:20px; --p-color: #333; /* --------------------------------------------------- h1 --------------------------------------------------- */ --h1-font:'Source Sans Pro', sans-serif; --h1-font-weight:400; --h1-font-size: calc(24px + (36 - 24) * ((100vw - 320px) / (1200 - 320))); --h1-font-size-min:24px; --h1-font-size-max:36px; --h1-line-height: calc(36px + (48 - 36) * ((100vw - 320px) / (1200 - 320))); --h1-line-height-min:36px; --h1-line-height-max:48px; --h1-color: #333; /* --------------------------------------------------- h2 --------------------------------------------------- */ --h2-font:'Source Sans Pro', sans-serif; --h2-font-weight:400; --h2-font-size: calc(21px + (32 - 21) * ((100vw - 320px) / (1200 - 320))); --h2-font-size-min:21px; --h2-font-size-max:32px; --h2-line-height: calc(32px + (42 - 32) * ((100vw - 320px) / (1200 - 320))); --h2-line-height-min:32px; --h2-line-height-max:42px; --h2-color: #333; /* --------------------------------------------------- h3 --------------------------------------------------- */ --h3-font:'Source Sans Pro', sans-serif; --h3-font-weight:400; --h3-font-size: calc(18px + (27 - 18) * ((100vw - 320px) / (1200 - 320))); --h3-font-size-min:24px; --h3-font-size-max:36px; --h3-line-height: calc(27px + (36 - 27) * ((100vw - 320px) / (1200 - 320))); --h3-line-height-min:27px; --h3-line-height-max:36px; --h3-color: #333; /* --------------------------------------------------- h4 --------------------------------------------------- */ --h4-font:'Source Sans Pro', sans-serif; --h4-font-weight:400; --h4-font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1200 - 320))); --h4-font-size-min:24px; --h4-font-size-max:36px; --h4-line-height: calc(24px + (30 - 24) * ((100vw - 320px) / (1200 - 320))); --h4-line-height-min:24px; --h4-line-height-max:30px; --h4-color: #333; /* --------------------------------------------------- h5 --------------------------------------------------- */ --h5-font:'Source Sans Pro', sans-serif; --h5-font-weight:400; --h5-font-size: calc(14px + (21 - 14) * ((100vw - 320px) / (1200 - 320))); --h5-font-size-min:24px; --h5-font-size-max:36px; --h5-line-height: calc(21px + (28 - 21) * ((100vw - 320px) / (1200 - 320))); --h5-line-height-min:21px; --h5-line-height-max:28px; --h5-color: #333; /* --------------------------------------------------- h6 --------------------------------------------------- */ --h6-font:'Source Sans Pro', sans-serif; --h6-font-weight:400; --h6-font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1200 - 320))); --h6-font-size-min:24px; --h6-font-size-max:36px; --h6-line-height: calc(18px + (24 - 18) * ((100vw - 320px) / (1200 - 320))); --h6-line-height-min:18px; --h6-line-height-max:24px; --h6-color: #333; /* --------------------------------------------------- button --------------------------------------------------- */ --btn-font:'Source Sans Pro', sans-serif; --btn-font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1200 - 320))); --btn-font-size-min:12px; --btn-font-size-max:18px; --btn-font-weight:400; --btn-line-height: calc(18px + (28 - 18) * ((100vw - 320px) / (1200 - 320))); --btn-line-height-min:18px; --btn-line-height-max:28px; --btn-color-text: #fff; /* --------------------------------------------------- link button (a) --------------------------------------------------- */ --abtn-color-text: #000; --abtn-color-icon: #000; --abtn-color-icon-inactive: #666; --abtn-color-bg: #e1e1e1; --abtn-hover-color-bg: #d1d1d1; --abtn-radius:5px; --abtn-padding-lr: calc(5px + (10 - 5) * ((100vw - 320px) / (1200 - 320))); --abtn-padding-tb: calc(2px + (4 - 2) * ((100vw - 320px) / (1200 - 320))); --abtn-icon-size: calc(14px + (22 - 14) * ((100vw - 320px) / (1200 - 320))); /* --------------------------------------------------- tag --------------------------------------------------- */ --tag-color-bg1: #D0E8FF; --tag-color-bg2: #FFD9B5; --tag-color-bg3: #CEEEDE; --tag-radius:5px; /* --------------------------------------------------- field message --------------------------------------------------- */ --message-size: calc(10px + (15 - 10) * ((100vw - 320px) / (1200 - 320))); --message-size-min:10px; --message-size-max:15px; --message-line-height: calc(12px + (18 - 12) * ((100vw - 320px) / (1200 - 320))); --message-line-height-min:12px; --message-line-height-max:18px; --message-color-info: #1DB900; --message-color-warning: #EBAF00; --message-color-error: #E20012; /* --------------------------------------------------- edit --------------------------------------------------- */ --edit-font:'Baloo Chettan 2', sans-serif; --frame-shadow:0px 0px 14px #000; /* --------------------------------------------------- text-coloring --------------------------------------------------- */ --col-green:#20A21F; --col-red:#B42A16; /* --------------------------------------------------- text-marker --------------------------------------------------- */ --marker-yellow:#FFFF3E; /* table */ --tbl-st-1-border: 1px solid #444; --tbl-st-1-head-back-col: #e1e1e1; --tbl-zebra-even-back-col: #f1f1f1; }