/* CSS for basic page layout and responsive behaviour common to all pages. * DO NOT PLACE CUSTOM PAGE CSS HERE - * this css is for handling the basic functionality of the website and the main menu in single column mode. * Double column pages have additional css and media queries to handle two content columns - eg basket page * This template is not for website content. The intention is to separate the basic functionality common to all pages from the custom content CARALAN RESPONSIVE CSS - HOW IT WORKS See 'site_layout_concept.htm' for an illustration of basic page system. The main content area is all within the 'main_content' div. Big Screens main_content div left padding is set to the sidebar width. This forces the custom page content into a column between the sidebar and the right hand edge of the window. Custom content divs can then simply be stacked in this column space and they will expand horizontally to fit the available window space. Small Screens Switching to small screen simply involves hiding the sidebar and removing the left padding from the 'main_content' div. All the custom content divs are already stacked in a single column. */ /* STUFF TO READ ############################################################### * * https://web.dev/articles/min-max-clamp * Describes how to control relative sizing of elements with calculated values, eg set a min and max font size; * * * * */ :root { /* applies to top level and all it's children NOTE: Though javascript can easily set css variables it cannot easily read them. So it makes sense to replicate at least some of these vars in page_template.js --clr-dark_grey : #7a848d; --clr-dark_blue : rgb(0,43,81); --clr-cream_background : #fcfbe8; */ /* COLOURS COLOURS COLOURS COLOURS COLOURS COLOURS COLOURS COLOURS COLOURS */ --clr-background : white; /*rgb(243, 243, 243);*/ --clr-light_blue : rgb(116,142,170); --clr-hover_blue : rgb(98,118,140); --clr-dark_blue : rgb(0,43,81); --clr-mid_blue : rgb(5,48,86); --clr-dark_grey : #6a747d; /* #7a848d; */ --clr-dark_grey_2 : rgb(104,104,104); --clr-body_text : rgb(64,64,64); --clr-pic_bg_grey : rgb(208,209,210); /* rgb(208,209,210); */ --clr-grey_page_tint : #f4f4f4; /* #e8eef5; */ --clr-input_prompt : #888888; --clr-text_grey : #222222; /* Dark grey body text */ --clr-cream_background :#f4f4f4; /* #fcfbe8; */ --clr-green_controls : #0bca4e; /* --clr-secondary: rgb(20, 110, 190); Bright Blue - menu button/bar selected background */ --clr-secondary: rgb(0,43,81); /* Originally Bright Blue (now --clr-dark_blue )- menu button/bar selected background */ --clr-secondary-text : rgb(255, 255, 255); --clr-btn_unselected: #6a747d; /* rgb(102, 102, 102); */ --clr-btn_hover: #7a848d; /* rgb(120, 120, 120); */ --clr-ncr-yellow: rgb(255, 249, 189); --clr-ncr-pink: rgb(240, 207, 235); --clr-ncr-blue: rgb(197, 218, 244); --clr-ncr-green: rgb(164, 236, 186); --clr-primary : rgb(250, 250, 255); /* Off White - menu button/bar selected text */ --clr-menu_chosen : rgb(227, 240, 252); /* Very light blue - menu bar option chosen */ --clr-tertiary : rgb(181, 218, 251); /* Light blue for panels rgb(200, 220, 250); */ --clr-primary-text : rgb(0,43,81); /* Dark Blue - menu bar unselected/chosen text */ --clr-primary-fifty : rgb(50, 100, 160); /* tint of dark blue */ --clr-btn_unselected : #6a747d; /* rgb(102, 102, 102); #666666 used for job param selection menu */ --clr-vlb_panel : rgb(218, 234, 246); /* very light blue panel */ /* Media query screen width breakpoints NOTE: These variables are for information only. Variable substitution does not work in media queries, ie '@media (min-width: var(--mw_mobile) )' doesn't work and the actual number values must be used. These values should be replicated in page_template.js as global vars so javascript can decide actions according to viewport css context using window.innerWidth . */ --mw_mobile : 700px; --mw_tablet : 992px; --mw_desktop : 1100px; /* this is only used on pages with 2 column content, ie the basket page */ --mw_max_2column : 700px; /* max-width of a column in a 2 column system */ --msr-sidebar-width: 270px; --msr-main-padding: 2vw; } /* FONTS FONTS FONTS FONTS FONTS FONTS FONTS FONTS FONTS FONTS FONTS FONTS */ @font-face { font-family: 'CG_Reg'; src: url('/fonts/Century Gothic Std Regular.otf'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'CG_Reg_It'; src: url('/fonts/Century Gothic Std Italic.otf'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'CG_Bld'; src: url('/fonts/Century Gothic Std Bold.otf'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'CG_Bld_It'; src: url('/fonts/Century Gothic Std Bold Italic.otf'); font-weight: normal; font-style: normal; font-display: swap; } /* @font-face { font-family: 'SG_Reg'; src: url('/fonts/Segoe UI.ttf'); font-weight: normal; font-style: normal; } */ @font-face { font-family: 'SG_Bld'; src: url('/fonts/Segoe_UI_Bold.ttf'); font-weight: normal; font-style: normal; } /* SHORT CLASSES */ .Segoe_Bd{ font-family:SG_Bld, Arial, sans-serif; } img{border-style:none;} h1{ font-family: CG_Bld, Arial, sans-serif; font-size:36pt; } h2{ font-family: CG_Bld, Arial, sans-serif; font-size:30pt; } h3{ font-family: CG_Bld, Arial, sans-serif; font-size:24pt; } h4{ font-family: CG_Bld, Arial, sans-serif; font-size:20pt; } h5{ font-family: CG_Bld, Arial, sans-serif; font-size:18pt; } h6{ font-family: CG_Bld, Arial, sans-serif; font-size:16pt; } a { text-decoration:none; cursor:pointer; } h1 { display:inherit; color:inherit; font-size:inherit; font-weight:inherit; font-family:inherit; line-height:inherit; text-decoration:inherit; margin:inherit; padding:inherit; } /* stop mobile safari turning telnos blue */ a[href^="tel:"] { color: inherit !important; text-decoration: none !important; } /* Button Style - mouseover and selected highlight effects. THIS IS IMPORTANT STUFF. DON'T MESS WITH IT OR ALL SORTS OF THINGS WILL STOP WORKING */ .btn{ border: none; vertical-align: middle; text-align: center; overflow: hidden; white-space: nowrap; text-decoration: none; color: inherit; background-color: inherit; cursor: pointer; border-radius: 4px; } .btn:hover, .btn:focus { color: var(--clr-secondary-text) !important; background-color: var(--clr-secondary) !important; } .btn:hover .no-hover, .btn:focus .no-focus { color: initial !important; background-color: initial !important; } .shadow { box-shadow: 2px 3px 7px 0px rgb(0 0 0 / 20%); } .shadow-right { box-shadow: 7px 3px 7px 0px rgb(0 0 0 / 20%); } .info_btn{ display:block; font-family: CG_Bld, Arial, sans-serif; font-size:30px; line-height:140%; padding:4px 5px 0px 5px; background-color:var(--clr-secondary-text); cursor:pointer; margin:3px 0px 0px 20px; width:auto; } .top_btn{ box-sizing:border-box; display:inline-block; border-width:2px; border-style:outset; /*background-image: url("/images/"); */ border-color:var(--clr-dark_grey); background-image: linear-gradient(to bottom right, #555555 ,var(--clr-dark_blue)); border-radius:8px; padding:2px 0px 2px 0px; background-color:var(--clr-dark_blue); box-shadow:2px 2px 1px 1px black; margin-bottom:2px; } .top_btn:hover{ border-color:#666666; background-image: linear-gradient(to bottom right, #444444 ,var(--clr-dark_blue)); } body { background-color:white; /* var(--clr-cream_background); */ color: var(--clr-dark_blue); font-family: CG_Reg, Arial, sans-serif; /*line-height:140%; This screws up predictable spacing of page items and should be removed.*/ margin : 0; box-sizing: border-box; } /* ###########################################################################################################*/ /* PAGE ELEMENTS PAGE ELEMENTS PAGE ELEMENTS PAGE ELEMENTS PAGE ELEMENTS PAGE ELEMENTS */ .txt_input { border-width: 1px; height:30px; border-style: solid; border-color: #999999; font-size: 16px; color: #333333; font-family: inherit; background-color: #ffffff; padding: 2px 5px 1px 5px; border-radius:3px; } /* Caralan alert modal system ################################################ */ .cal_background{ position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:5100; background-color:rgba(0,0,0,0.5); visibility:hidden; } .cal_box{ position: fixed; top: 50%; left: 50%; width:0px; height:0px; padding:20px; padding-top:45px; line-height:140%; z-index:-1; visibility:hidden; box-shadow: 2px 5px 9px 0px rgba(0,0,0,0.18); background-color:white; border-width:1px; border-style:solid; border-color:black; border-radius:4px; font-family: CG_Reg, Arial, sans-serif; color:#333333; transform: translate(-50%, -50%); } .cal_title{ font-family: CG_Bld, Arial, sans-serif; position:absolute; top:10px; left:20px; font-size:14pt; } .cal_close{ position:absolute; top:0px; right:0px; cursor:pointer; z-index:26000; } .cal_message{ position:absolute; top:35px; width:inherit; margin-left:-20px; padding-right:40px; } #sidebar{ display:block; position : fixed; top:0px; left:0px; height:100%; max-width: calc(100% - 60px); overflow : auto; /* adds scrollbars if content is too big */ line-height:130%; font-family : CG_Reg, Arial, sans-serif; font-size:18pt; color: var(--clr-body_text); background-color: var(--clr-grey_page_tint); width : var(--msr-sidebar-width); padding : 16px 16px 16px 16px ; box-sizing: border-box; box-shadow: 7px 3px 7px 0px rgb(0 0 0 / 20%); z-index:5050; } #sidebar_background{ position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:5000; background-color:rgba(0,0,0,0.5); visibility:hidden; } #sidebar_top_band{ width : var(--msr-sidebar-width); height:40px; position:fixed; top:0px; background-color:var(--clr-dark_blue); left:0px; margin:0px; color:white; } #sidebar_newsletter{ /* Top basket flyout on large screens */ position:fixed; top:6px; /*left: min(267px, calc(100% - 60px)); */ left: calc(var(--msr-sidebar-width) - 90px); font-size: 25px; display: flex; justify-content: center; box-sizing: border-box; padding:3px;; border: none; vertical-align: middle; text-align: center; overflow: hidden; white-space: nowrap; text-decoration: none; color: inherit; background-color: transparent; cursor: pointer; align-items: center; z-index:6090; } #sidebar_basket{ /* Top basket flyout on large screens */ position:fixed; top:6px; /*left: min(267px, calc(100% - 60px)); */ left: calc(var(--msr-sidebar-width) - 50px); font-size: 25px; display: flex; justify-content: center; box-sizing: border-box; padding:3px;; border: none; vertical-align: middle; text-align: center; overflow: hidden; white-space: nowrap; text-decoration: none; color: white; background-color: transparent; cursor: pointer; align-items: center; z-index:4090; } #sidebar_heading{ /* Butterfly heading container in sidebar */ position:absolute; top:40px; box-sizing: border-box; } #sidebar_products{ display:block; margin:230px 0px 0px 0px; line-height:180%; padding:0px 0px 10px 10px; box-sizing: border-box; } #sidebar_links{ display:block; margin:10px 0px 0px 0px; padding:0px 0px 0px 10px; line-height:180%; border-width:0px; border-top-style:solid; border-color:black; box-sizing: border-box; color:inherit; } .sidebar_link{ cursor:pointer; padding:10px 0px 10px 0px; font-size:16pt; color:inherit; } .sidebar_product{ cursor:pointer; padding:10px 0px 10px 0px; font-size:16pt; color:inherit; font-family: CG_Bld, Arial, sans-serif; } #sidebar_contact{ display:block; margin:10px 0px 0px 0px; padding:35px 0px 0px 10px; line-height:180%; border-width:1px; border-top-style:solid; border-color:black; box-sizing: border-box; font-size:16px; } .sidebar_contact_item{ line-height:130%; } .line_div{ /* Horizontal 1px black line */ border-width:1px; border-color:black; border-style:solid; width:100%; margin-left:0px; /* Butt up to sidemenu */ } #main_content{ display : block; float : none; margin : 0px;; /* padding-left: calc(var(--msr-sidebar-width) - var(--msr-main-padding)); */ padding-left: var(--msr-sidebar-width); /* move content clear of sidebar */ padding-bottom: 0px; } #top_band_div{ display:block; margin: 20px 0px 20px 0px; font-family: CG_Bld, Arial, sans-serif; color: white; background-color: var(--clr-dark_blue); } .content_item{ /* To butt a content_item div up to the sidebar set it's left margin to 0px */ display:block; float:none; position:static; margin: 0px 4% 0px 4%; } #heading{ /* the space above the blue bar containing the page h1 tag */ height:auto; padding-top:20px; box-sizing: border-box; width:100%; margin-bottom:5px; } /* SMALL SCREEN HEADER/FOOTER BARS CSS ###############################################*/ #header_bar{ /* Header bar that shows on small screens */ display:block; position:fixed; top:0px; z-index:5101; /* must be a higher number than #sidebar */ width:100%; height:48px;; background-color: var(--clr-grey_page_tint); color:white; font-family :CG_Reg,Arial,sans-serif; box-sizing: border-box; box-shadow: 0px 0px 7px 0px rgb(0 0 0 / 20%); padding:2px 0px 2px 2vw; border-top-width:0px; border-top-style:solid; border-top-color:var(--clr-dark_blue); padding-top:2px; } #header_band{ color:var(--clr-grey_page_tint); height:auto; padding:20px 0px 0px 4%; box-sizing: border-box; width:100%; padding-bottom:5px; margin-bottom:10px; background-color:var(--clr-dark_grey); border-width:0px 0px 10px 0px; border-style:solid; border-color:var(--clr-dark_blue); } #header_menu_btn{ /* Button container for hamburger stack img */ position:fixed; z-index:5200; top:12px; padding: 0px; border: none; vertical-align: middle; text-align: center; overflow: hidden; white-space: nowrap; text-decoration: none; color: inherit; background-color: inherit; cursor: pointer; box-sizing: border-box; -webkit-appearance: button; } #header_caralan{ left:70px; position:fixed; top:7px; width:auto; display:flex; box-sizing: border-box; } #header_basket{ position:fixed; top:9px; right:7px; cursor:pointer; height:35px; } .basket-num{ line-height:140%; color:inherit; } #header_text_container{ top:0px; padding:8px 5px 0px 0px; margin:0px; font-size:16pt; font-family:SG_Bld,Arial,sans-serif; line-height:inherit; color:var(--clr-dark_blue); } #header_stack_menu{ width:30px; } /* FOOTER BAR #################### */ #footer_bar{ /* just displays a separator line Fixed bottom bar on small screens */ display:none; position:fixed; width:100%; box-sizing: border-box; margin:0px; padding:0px; bottom:0px; z-index:5101; border-bottom-width:0px; border-bottom-style:solid; border-bottom-color:var(--clr-dark_blue); } #footer_basket{ /* NOT USED Basket in footer on small screens */ position:absolute; bottom:7px; left: 8px; font-size: 25px; display: flex; justify-content: center; box-sizing: border-box; padding:3px;; border: none; vertical-align: middle; text-align: center; overflow: hidden; white-space: nowrap; text-decoration: none; color: inherit; background-color: inherit; cursor: pointer; align-items: center; } /* EOF SMALL SCREEN HEADER/FOOTER BARS CSS ###############################################*/ /* BOTTOM GREY INFO SECTION ######################################################## */ #btm_info_band{ box-sizing: border-box; background-color:var(--clr-dark_grey); color:white; margin-top:20px; padding:20px 4% 40px 4%; height:auto; width:100%; border-width:0px 0px 5px 0px; border-color:var(--clr-grey_page_tint); border-style:solid; } #btm_info_container{ /* same width settings as slideshow_frame_div */ box-sizing:border-box; max-width:900px; margin: 0px; } #btm_info_title{ font-size:30px; margin:25px 0px 5px 0px; color:var(--clr-grey_page_tint); } .btm_info_heading{ margin:25px 0px 5px 0px; font-size:24px; color:var(--clr-grey_page_tint); } .btm_info_text{ margin:0px 5px 0px 0px; padding:0px; line-height:140%; color:white; } /* BOTTOM LINKS ###############################################################*/ #btm_links_div{ display:block; position:static; box-sizing: border-box; background-color:var(--clr-dark_blue); width:100%; padding:0.6vw 0px 40px calc(var(--msr-sidebar-width) + var(--msr-main-padding) + 5vw); margin-left:0px; /* butt up to sidebar or make full width on small screens */ color:white; height:auto; } #btm_links_flex{ width:95%; display:flex; height:auto; flex-flow:row wrap; justify-content:flex-start; } .btm_links_column{ display:block; width:270px; margin:20px 1vw 2.5vw 0px; height:auto; } .btm_links_heading{ font-size:24px; color:var(--clr-grey_page_tint); font-family: CG_Bld, Arial, sans-serif; } .btm_links_content{ margin-top:3px; } .btm_links_item{ font-size:14pt; color:white; } /* PRODUCT ORDERING PAGES ################################################## */ .big_basket_img{ /* Large basket image in Add to Basket section of product pages */ width:90px; } .big_basket_txt{ font-size: 24px; font-family:CG_Bld, Arial, sans-serif; padding-left:5px; margin:0px; } .spec_selected{ /* eg PERFORATED BOOKS or A4 shown at right of selector bar */ padding:0px 5px 0px 5px; text-align:left; line-height:140%; font-size:18pt; top:0px; float:right; margin-top:7px; } .spec_select_name{ /* eg BINDING or SIZE, etc. Shown at left of selector bar */ padding:5px 5px 2px 5px; text-align:left; top:0px; } /* Item price indicator in footer on small pages */ .footer_price{ display:block; position:absolute; right:20px; top:4px; font-size:16px; padding-right:20px; } #line_header{ /* Page header with big text and a thin single underline - used for input pages - ie not info pages */ font-family : CG_Bld, Arial, sans-serif; box-sizing: border-box; padding:25px 0px 5px 40px; width:100%; height:98px; margin-top:0px; line-height:55px; font-size:50px; border-width:0px 0px 1px 0px; border-color:black; border-style:solid; } /* COMMON CSS FOR ALL INFO PAGES * * information.htm * artwork_guide.htm * upload_files.htm * custom_quote.htm * contact_us.htm * * order_receipt_bacs.htm * order_receipt_card.htm * order_receipt_paypal.htm * * */ #main_header{ font-family : CG_Bld, Arial, sans-serif; font-size:40px; width:100%; display:block; float:none; position:static; padding:0px 0px 20px 0px; margin:44px var(--msr-main-padding) 0px var(--msr-main-padding); } #info_top_band_div{ display:block; margin: 0px 0px 20px 0px; font-family: CG_Bld, Arial, sans-serif; color: white; height:12px; background-color:var(--clr-dark_blue); border-width: 0px 0px 12px 0px; border-style:solid; border-color:var(--clr-dark_grey_2); } .content_heading{ font-size:18px; font-family: CG_Bld, Arial, sans-serif; margin:0px; padding: 15px 0px 0px 0px; } .content_heading_large{ font-size:24px; font-family: CG_Bld, Arial, sans-serif; margin:0px; padding: 15px 0px 0px 0px; } .info_list{ max-width:900px; margin: 6px 0px 0px 30px; padding: 0px 0px 0px 0px; } .info_list_item{ line-height:130%; margin-bottom:2px; } .input_panel{ /* container for text input sections */ max-width:800px; margin-top:80px; border-radius:4px; border-width:1px; border-color:var(--clr-dark_blue); border-style:solid; text-align:right; background-color: white; /* var(--clr-grey_page_tint); */ padding-right:20px; } .panel_heading{ text-align:left; display:block; height:33px; font-size:28px; padding: 20px 0px 8px 10px; line-height:120%; width:auto; height:auto; } .ct_line{ /* A div containing a single input line with a text box. */ margin: 8px 0px 8px 2px; font-size:20px; line-height:140%; } .ct_textarea{ display:inline-block; font-size:16px; width:60%; min-height:66px; padding:5px; resize: vertical; margin-bottom:5px; font-family: CG_Reg, Arial, sans-serif; vertical-align:top; } .info_txt{ border-width: 1px; border-style: solid; border-color: #999999; font-size: 16px; color: #333333; font-family: inherit; background-color: #ffffff; padding: 2px 5px 1px 5px; border-radius:3px; height:25px; width:60%; } /* CUSTOM QUOTE PAGE ################################################################*/ .quote_dropdown{ box-sizing: border-box; width:60%; height:28px; font-size:16px; } .quote_textarea{ display:none; box-sizing: border-box; font-size:16px; width:60%; min-height:66px; padding:5px; resize: vertical; margin-bottom:5px; font-family: CG_Reg, Arial, sans-serif; vertical-align:top; } .submit_option_div{ /* The finished quote buttons at bottom of page */ box-sizing: border-box; max-width:200px; width:30%; height:auto; background-color:var(--clr-dark_grey); color:white; font-family: CG_Bld, Arial, sans-serif; font-size:24px; line-height:160%; border-radius:4px; margin:2vw; cursor:pointer; text-align:center; padding:10px; } /* UPLOAD FILES PAGE ################################################################*/ #upload_details{ display:inline-block; font-size:16px; width:60%; min-height:66px; padding:5px; resize: vertical; margin-bottom:5px; font-family: CG_Reg, Arial, sans-serif; vertical-align:top; } #upload_iframe{ /* applies to all the uploader pages */ display:inline-block; min-height:272px; height:272px; width:100%; /* limits to width of containing panel minus padding - so always fits on small screens */ max-width:500px; /* Will never be wider than this on large screens */ border-radius:4px; } /* Scroll Targets ##########################################################*/ #specification{ /* Offset for scrollIntoView function when returning to page after selecting a template */ scroll-margin-top: 50px; } /* stop safari turning telnos blue */ a[href^="tel:"] { color: inherit !important; text-decoration: none !important; } /* MEDIA QUERIES ################################################################################################ Always place these at bottom of css file because css is applied in the order it is parsed, ie if this is placed at the top of the file it will be overidden by subsequently declared css rules */ @media (max-width: 600px) { /* Hide/shrink large screen stuff on small screens */ .top_btn{ border-radius:5px; } .info_txt{ width:45%; } /* ORDERING PAGES ######## */ .spec_selected{ font-size:19px; margin-top:9px; } .spec_select_name { font-size:20px; } .big_basket_img{ /* Large basket image in Add to Basket section on product pages */ width:70px; } .big_basket_txt{ font-size: 20px; } .main_header_h1{ font-size:32px; } #line_header{ font-size:35px; padding:30px 0px 5px 10px; } #btm_info_title{ font-size:24px; } } /* Eof max-width: 600px */ /* 992PX SWITCH BETWEEN LARGE SCREEN AND SMALL SCREEN MODE */ @media (min-width: 992px ) { /* Hide small screen stuff on large screens */ #header_bar{ /* Hide the header */ display:none; } #footer_bar{ /* Hide the footer */ display:none; } #sidebar_close{ /* Hide the menu close button */ display:none; } } /* EOF @media (min-width: 992px) */ @media (max-width: 992px) { /* Hide large screen stuff on small screens */ #sidebar{ /* Hide the sidebar */ display:none; } #main_content{ /* Make display column full width */ padding-left: 0px; } #btm_links_div{ padding-left: 5vw; } #line_header{ padding:35px 0px 5px 20px; } #btm_info_band{ padding-left:4%; } } /* EOF @media (max-width: 992px) */ @media (min-width: 1930px) { /* Limit scaling to full HD settings - ie don't keep growing stuff as monitors get bigger than full HD. 1vw is 1% of viewport width - ie 19.2px at full HD. DO THIS WHEN I'VE GOT SOME SPARE TIME!!!!! */ } /* EOF @media (min-width: 1930px) */